Blazor Dock Manager (ドック マネージャー) の概要

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

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

この例は、アプリケーションで使用できる IgbDockManager のほとんどの機能とドッキング オプションを示しています。

カスタマイズ

Dock Manager コンポーネントは、スロットとパーツを使用してすべてのボタンをカスタマイズするオプションを提供します。ボタンを変更するには、Dock Manager 内で独自の要素を定義し、slot 属性を対応する識別子に設定します。

これらのスロットとパーツを使用して、カスタマイズされた Dock Manager レイアウトを作成してみましょう。最初に、closeButton、maximizeButton、minimizeButton、pinButton、および unpinButton スロットを使用して独自のアイコンを提供します。

次に、スタイルシートで公開されたパーツを使用します。こうすることで、コンポーネントのスタイルを完全に制御できるようになります。

igc-dockmanager::part(unpinned-tab-area) {
    background: #bee9ec;
}

igc-dockmanager::part(unpinned-tab-area--left) {
    border-right: 1px dashed #004d7a;
}

igc-dockmanager::part(unpinned-tab-area--bottom) {
    border-top: 1px dashed #004d7a;
}

igc-dockmanager::part(tab-header-close-button),
igc-dockmanager::part(pane-header-close-button) {
    background-color: #e73c7e;
}

igc-dockmanager::part(pane-header-pin-button),
igc-dockmanager::part(pane-header-unpin-button) {
  background: rgb(218, 218, 218);
  border: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

igc-dockmanager::part(tabs-maximize-button),
igc-dockmanager::part(tabs-minimize-button),
igc-dockmanager::part(pane-header-minimize-button),
igc-dockmanager::part(pane-header-maximize-button) {
  width: 24px;
  height: 24px;
  border: none;
  transition: opacity 250ms ease-in-out;
  opacity: 0.3;
  margin-right: 15px;
  margin-top: -5px;
  margin-left: 0px;
}

すべて順調にいけば、アイコンとタブ領域がカスタマイズされた Dock Manager ができあがっているはずです。実際に見てみましょう。

以下に、すべてのボタンおよびスプリッターハンドルのスロット名の一覧を記載しています。

各スロットに対応するパーツは、このページのスタイル設定セクションにあるCSS パーツで確認できます。

CSS 変数

次の表では、ドック マネージャー コンポーネントのスタイル設定に使用されるすべての CSS 変数について説明します。

キーボード ナビゲーション

キーボード ナビゲーションは、ドック マネージャーのアクセシビリティを強化し、すべてのペインをナビゲートしたり、アクティブなペインをドッキングしてビューを複数の方向に分割したりするなど、エンドユーザーにさまざまな操作を提供します。

ショートカットは以下の通りです。

ドッキング

• CMD/CTRL + SHIFT + ↑ グローバルの上へのドック。
• CMD/CTRL + SHIFT + ↓ グローバルの下へのドック。
• CMD/CTRL + SHIFT + → グローバルの右へのドック。
• CMD/CTRL + SHIFT + ← グローバルの左へのドック。
• SHIFT + ↑ タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが上にドッキングされます。
• SHIFT + ↓ タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが下にドッキングされます。
• SHIFT + → タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが右にドッキングされます。
• SHIFT + ← タブ グループに複数のタブがある場合、ビューが分割され、フォーカスされたタブが左にドッキングされます。

ナビゲーション

• CMD/CTRL + F6 または CMD/CTRL + → ドキュメント ホストの次のタブにフォーカスします。
• CMD/CTRL + SHIFT + F6 または CMD/CTRL + ← ドキュメント ホストの前のタブにフォーカスします。
• ALT + F6 次のコンテンツ ペインにフォーカスします。
• ALT + SHIFT + F6 前のコンテンツ ペインにフォーカスします。

ペイン ナビゲーター

次のキーボード ショートカットは、ペインやドキュメントを反復できるナビゲーターを示しています。

• CMD/CTRL + F7 または CMD/CTRL + F8 最初のドキュメントから開始します。
• ALT + F7 または ALT + F8 最初のペインから開始します。
• CMD/CTRL + SHIFT + F7 または CMD/CTRL + SHIFT + F8 最後のドキュメントから逆方向に開始します。
• ALT + SHIFT + F7 または ALT + SHIFT + F8 最後のペインから逆方向に開始します。

その他

• ALT + F3 アクティブなペインを閉じます。

サンプル demo で上記のすべてのアクションを練習しましょう。

スタイル設定

ドック マネージャーは、シャドウ DOM を使用してスタイルと動作をカプセル化します。その結果、通常の CSS セレクターでその内部要素を単純にターゲットにすることはできません。そのため :: part CSS セレクターでターゲットにできるコンポーネント parts を公開しています。

igc-dockmanager::part(content-pane) {
  border-radius: 10px;
}

以下の例では、公開されているCSSパーツを使用してDock Managerをカスタマイズする方法をご紹介します。

CSS パーツ

API リファレンス