ドック マネージャー

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

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

このサンプルが気に入りましたか? 完全な 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 コンポーネントを使用する高度な例については、このバージョンのデータ分析サンプルを参照してください。