Blazor ドック マネージャーの概要

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

Note

追加予定

Blazor ドック マネージャーは現在開発中で、間もなく完成します。Blazor ドック マネージャー コンポーネントの完成後、このトピックとサンプルが更新される予定です。この間にドック マネージャーコ ンポーネントが必要な場合、Blazor アプリケーションで Ignite UI for Web Components ドック マネージャーを使用できます。

以下のブログ (英語) に記載されている手順に従ってください。

"Using the Ignite UI for Web Components Dock Manager in Blazor"

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

使用方法

ドック マネージャーをインポートした後、ページに追加できます。

Note

ドック マネージャー コンポーネントは ShadowDOM とスロットを使用するため、Internet Explorer 11 および Edge 18 以前 (Chromium 以外のバージョン) などの古いブラウザーではサポートされません。

ドック マネージャーにはペインのレイアウトを説明する layout プロパティがあります。レイアウトの定義するには、rootPane プロパティを設定し、子ペインを追加します。以下は、単一のコンテンツ ペインでレイアウトを定義する方法です。

ペインのコンテンツをロードするために、ドック マネージャーはスロットを使用します。コンテンツ要素の slot 属性はレイアウト構成のコンテンツ ペインの contentId と一致する必要があります。エンドユーザーがペインのサイズを変更する場合は、予測可能な応答のために、コンテンツ要素の幅と高さを 100% に設定することを強くお勧めします。

ドック マネージャーは複数のペイン タイプを定義します。

各タイプのペインには size プロパティがあります。親の方向に応じて、サイズはペインの幅または高さに影響します。ペインのサイズはその兄弟ペインのサイズに相対し、デフォルトは 100 です。サイズが 200 と 100 に設定された 2 つの兄弟ペインがある場合、最初のペインは 2 番目のペインのサイズの 2 倍になります。親の絶対サイズが 900px の場合、それぞれ 600px と 300px にサイズ設定されます。

エンドユーザーは、ランタイムにレイアウトをカスタマイズするために以下のアクションを実行できます。

  • ペインをピン設定 / ピン解除します。
  • ペインをサイズ変更します。
  • ペインを閉じます。
  • ペインをフロートさせるためにドラッグします。
  • フローティング ペインを移動します。
  • フローティング ペインをドックします。
  • Maximize a pane

これらはすべてドック マネージャーの layout プロパティに反映されます。

コンテンツ ペイン

Content pane ヘッダーとコンテンツを含むペインを表します。スプリットされたペインまたはタブ グループ ペイン内でホストできます。以下はコンテンツ ペインの定義方法です。

ペインのピン固定が解除されると、ドック マネージャーのいずれかの端にタブ ヘッダーとして表示されます。エンドユーザーに選択されると、そのコンテンツはドッキングされたピン固定ペインの上に表示されます。コンテンツ ペインのピン固定を解除するには、isPinned プロパティを false に設定します。

isPinned プロパティはドキュメント ホストの外部にドッキングされているコンテンツ ペインのみに影響します。また、フローティング ペインでホストされているコンテンツ ペインのピン固定を解除することはできません。

デフォルトでは、コンテンツ ペインのピン固定解除先は、ドキュメント ホストに対するペインの相対的な位置に基づいて自動的に計算されます。複数のドキュメント ホストが定義されている場合、ピン固定されていないコンテンツ ペインの親階層で最も近いホストが使用されます。ドキュメント ホストが定義されていない場合、デフォルトの場所 left が使用されます。unpinnedLocation プロパティを使用してピン固定が解除されたペインの行き先を設定することも可能です。

allowCloseallowPinningallowDocking および allowFloating プロパティを使用して、コンテンツ ペインで許可されるエンドユーザー操作を設定できます。

分割ペイン

Split pane は、orientation プロパティに基づいてすべての子ペイン を水平または垂直に積み重ねるコンテナー ペインです。以下は、2 つの子コンテンツ ペインを持つ水平の分割ペインの定義方法です。

分割ペインは、他のスプリットされたペインを含むすべてのペイン タイプの子ペインを含むことができます。

タブ グループ ペイン

Tab group pane は、その子コンテンツ ペインをタブ コンポーネントのタブとして表示します。以下は、2 つのタブそれぞれにコンテンツ ペインを持つタブ グループ ペインの定義方法です。

ドキュメント ホスト

Document host コード編集やデザイン ビュー用の Visual Studio のタブと同様のドキュメント タブ領域です。以下は、2 つのドキュメント タブを持つドキュメント ホストを定義する方法です。

フローティング ペイン

フローティング ペインは、フローティング ウィンドウで他のペインの上に描画される分割ペインです。フローティング ペインの定義は、layoutfloatingPanes プロパティに保存されます。以下は、単一のコンテンツ ペインを含むフローティング ペインを追加する方法です。

floatingLocationfloatingWidthfloatingHeight プロパティは絶対寸法をピクセル単位で表します。注: これらのプロパティは floatingPanes 配列の分割ペインにのみ適用されます。

アクティブ ペイン

ドック マネージャー コンポーネントは、フォーカスを含むコンテンツ ペインを強調表示し、activePane プロパティで公開します。プロパティを設定することによってアクティブ ペインをプログラムで変更できます。activePaneChanged イベントにサブスクライブして、activePane プロパティの変更をリッスンすることもできます。

レイアウトの保存/読み込み

レイアウトを復元または永続化するには、layout プロパティの値を取得または設定します。以下は、文字列化された JSON としてレイアウトを保存する方法です。

レイアウト オブジェクトのプロパティを変更しても、ドック マネージャーの更新はトリガーされません。それが目的の場合、以下のようにレイアウト オブジェクト全体を置き換える必要があります。

イベント

ドック マネージャー コンポーネントは、ペインを閉じる、ピン固定、サイズ変更、ドラッグするなど、特定のエンドユーザーの操作が実行されるとイベントを発生させます。ドック マネージャーのイベントの完全なリストは、こちらです。paneClose イベントのイベント リスナーを追加する方法は以下の通りです。

テーマ

ドック マネージャーには、light (明るい) テーマと dark (暗い) テーマがあります。Light テーマがデフォルトです。Dark に変更するには、igc.themes.css ファイルを css にインポートし、dark-theme クラスをドック マネージャーまたはその親に追加します。

@import '~igniteui-dockmanager/dist/collection/styles/igc.themes';

ローカライズ

ドック マネージャー コンポーネントは、コンテキスト メニュー、ツールチップ、および aria 属性で使用される文字列のローカライズをサポートします。デフォルトでは、ドック マネージャー はその親の lang 属性を検索してページの言語を検出します。lang 属性が設定されていないか、ドック マネージャーがサポートしない値に設定されている場合、デフォルトの言語は 英語 (en) です。ドック マネージャーは、英語 (en)日本語 (jp)韓国語 (ko)スペイン語 (es) の組み込みローカライズ文字列を提供します。その他の言語のリソース文字列を提供するには、addResourceStrings メソッドを使用します。

ドック マネージャーは、文字列を変更できる resourceStrings プロパティを公開します。resourceStrings プロパティを設定すると、ドック マネージャーはどの lang 属性が設定されていても文字列を使用します。