ドック マネージャー

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

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

使用方法

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

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

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

npm install igniteui-dockmanager

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

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

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

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();

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

<igc-dockmanager>
</igc-dockmanager>

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

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