ドック マネージャー

    Ignite UI Dock Manager コンポーネントは、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。

    Angular ドック マネージャーの例

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

    ドック マネージャーは標準の Web コンポーネントであり、Angular アプリケーションで使用できます。

    以下の手順に従って、ドック マネージャーのパッケージを Angular プロジェクトに追加し、コンポーネントを使用するためにセットアップします。

    最初に、igniteui-dockmanager パッケージをインストールします。

    npm install igniteui-dockmanager
cmd

    次に、CUSTOM_ELEMENTS_SCHEMA スキーマを AppModule に含めます。

    import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
typescript

    main.ts ファイルの defineCustomElements() 関数を呼び出します。

    import { AppModule } from './app/app.module';
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import { enableProdMode } from '@angular/core';
import { environment } from '.environments/environment';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));

defineCustomElements();
typescript

    Angular コンポーネント テンプレートで Dock Manager コンポーネントを使用する準備ができました。タグ名を使用します。

    <igc-dockmanager>
</igc-dockmanager>
html

    Dock Manager コンポーネントの使用方法の詳細については、このトピック (英語) を参照してください。

    さまざまな Ignite UI for Angular コンポーネントをホストするペインで Dock Manager コンポーネントを使用する高度な例については、このバージョンのデータ分析サンプルを参照してください。