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;
}
すべて適切に設定できると、カスタマイズされたアイコンとタブ領域を持つ DockManager が表示されます。以下は結果です。
以下は、すべてのボタンとスプリッター ハンドルのスロット名のリストです。
スロット名 | 説明 |
---|---|
closeButton |
閉じるボタン。 |
paneHeaderCloseButton |
ペイン ヘッダーの閉じるボタン。 |
tabHeaderCloseButton |
タブ ヘッダーの閉じるボタン。 |
moreTabsButton |
その他のタブボタン。 |
moreOptionsButton |
その他のオプションボタン。 |
maximizeButton |
最大化ボタン。 |
minimizeButton |
最小化ボタン。 |
pinButton |
ピン固定ボタン。 |
unpinButton |
ピン固定解除ボタン。 |
splitterHandle |
スプリッターのハンドル。 |
各スロットの対応するパーツは、このページのスタイル設定セクションの CSS パーツにあります。
CSS 変数
次の表では、ドック マネージャー コンポーネントのスタイル設定に使用されるすべての CSS 変数について説明します。
CSS 変数 | 説明 |
---|---|
--igc-background-color |
ペイン ナビゲーター コンポーネント内のヘッダーの背景色。 |
--igc-accent-color |
フォーカスされているペイン ヘッダー アクション パーツ内のボタンの背景色。 |
--igc-active-color |
アクティブな状態のコンポーネントに使用されるテキストとボックス シャドウの色。 |
--igc-border-color |
ペイン ヘッダー コンポーネントのボーダー下線の色。 |
--igc-font-family |
ドック マネージャー コンポーネントの font-family。 |
--igc-dock-background |
ドック マネージャー、タブ、およびフローティング ペイン コンポーネントの背景色。 |
--igc-dock-text |
ドック マネージャーおよびフローティング ペイン コンポーネントのテキストの色。 |
--igc-pane-header-background |
ペイン ヘッダー コンポーネントの背景色。 |
--igc-pane-header-text |
ペイン ヘッダー コンポーネントのテキストの色。 |
--igc-pane-content-background |
ドック マネージャーおよびタブ パネル コンポーネント内のコンテンツの背景色。 |
--igc-pane-content-text |
ドック マネージャーおよびタブ パネル コンポーネント内のコンテンツのテキストの色。 |
--igc-tab-text |
タブ ヘッダー コンポーネントのテキストの色。 |
--igc-tab-background |
タブ ヘッダー コンポーネントの背景色。 |
--igc-tab-border-color |
タブ ヘッダー コンポーネントの境界線の色。 |
--igc-tab-text-active |
選択したタブ ヘッダー コンポーネントのテキストの色。 |
--igc-tab-background-active |
選択したタブ ヘッダー コンポーネントの背景色。 |
--igc-tab-border-color-active |
選択したタブ ヘッダー コンポーネントのボーダーの色。 |
--igc-pinned-header-background |
ピン固定されていないペイン ヘッダー コンポーネントの背景色。 |
--igc-pinned-header-text |
ピン固定されていないペイン ヘッダー コンポーネントのテキストの色。 |
--igc-splitter-background |
スプリッター コンポーネントの背景色。 |
--igc-splitter-handle |
スプリッター ハンドルの背景色。 |
--igc-button-text |
ペイン ヘッダー アクション パーツ内のボタンの色。 |
--igc-flyout-shadow-color |
コンテンツ ペイン コンポーネントのボックス シャドウの色。 |
--igc-joystick-background |
ジョイスティックとルート ドッキング インジケーター コンポーネントの背景色。 |
--igc-joystick-border-color |
ジョイスティックとルート ドッキング インジケーター コンポーネントのボーダーの色。 |
--igc-joystick-icon-color |
ジョイスティックとルート ドッキング インジケーター コンポーネントのアイコンの色。 |
--igc-joystick-background-active |
ジョイスティックとルート ドッキング インジケーター コンポーネントのホバー背景色。 |
--igc-joystick-icon-color-active |
ジョイスティックとルート ドッキング インジケーター コンポーネントのホバー アイコンの色。 |
--igc-floating-pane-border-color |
フローティング ペインのボーダーの色。 |
--igc-context-menu-background |
コンテキスト メニュー項目の背景色。 |
--igc-context-menu-background-active |
ホバーおよびフォーカス時のコンテキスト メニュー項目の背景色。 |
--igc-context-menu-color |
コンテキスト メニュー項目のテキストの色。 |
--igc-context-menu-color-active |
ホバーおよびフォーカス時のコンテキスト メニュー項目のテキストの色。 |
--igc-drop-shadow-background |
ドロップ シャドウの背景色。 |
--igc-disabled-color |
無効状態のコンポーネントのテキストの色。 |
キーボード ナビゲーション
キーボード ナビゲーションは、ドック マネージャーのアクセシビリティを強化し、すべてのペインをナビゲートしたり、アクティブなペインをドッキングしてビューを複数の方向に分割したりするなど、エンドユーザーにさまざまな操作を提供します。
ショートカットは以下のとおりです。
ドッキング
- 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 パーツのいくつかを使用してドック マネージャーをカスタマイズする機能を紹介します。
CSS パーツ
パーツ名 | 説明 |
---|---|
content-pane |
コンテンツ ペイン コンポーネント。 |
pane-header |
コンテンツ ペインのヘッダー コンポーネント。 |
pane-header-content |
コンテンツ ペイン ヘッダーのコンテンツ領域。 |
pane-header-actions |
コンテンツ ペイン ヘッダーのアクション領域。 |
active |
アクティブ状態を示します。pane-header 、pane-header-content 、pane-header-actions 、tab-header に適用されます。 |
floating |
フローティング ペインの配置を示します。pane-header 、pane-header-content 、pane-header-actions に適用されます。 |
window |
フローティング ウィンドウの配置を示します。pane-header 、pane-header-content 、pane-header-actions に適用されます。 |
split-pane |
スプリット ペイン コンポーネント。 |
splitter |
サイズ変更スプリッター コンポーネント。 |
splitter-base |
スプリッター コンポーネントの基本要素。 |
splitter-ghost |
スプリッター コンポーネントのゴースト要素。 |
unpinned-pane-header |
固定されていないペイン ヘッダー コンポーネント。 |
tab-header |
タブ ヘッダー コンポーネント。 |
tab-header-more-options-button |
タブ ヘッダーのその他のオプション ボタン。 |
tab-header-close-button |
タブ ヘッダーの閉じるボタン。 |
selected |
選択状態を示します。tab-header および tab-header-close-button に適用されます。 |
hovered |
ホバー状態を示します。tab-header-close-button に適用されます。 |
header-title |
タブ ヘッダーのテキスト タイトル。 |
tab-strip-area |
タブ ヘッダーを含むタブ ストリップ領域。 |
tab-strip-actions |
タブ アクションを含むタブ ストリップ領域。 |
top |
タブの上位置を示します。tab-header 、tab-strip-area 、tab-strip-actions に適用されます。 |
bottom |
タブの下位置を示します。tab-header 、tab-strip-area 、tab-strip-actions に適用されます。 |
context-menu |
コンテキスト メニュー コンポーネント。 |
context-menu-item |
コンテキスト メニュー コンポーネントの項目。 |
docking-preview |
ドッキング プレビュー地域。 |
docking-indicator |
非ルート ドッキング インジケーター。 |
root-docking-indicator |
ルート ドッキング インジケーター。 |
pane-navigator |
ペイン ナビゲーター コンポーネント。 |
pane-navigator-header |
ペイン ナビゲーターのヘッダー領域。 |
pane-navigator-body |
ペイン ナビゲーターの本体領域。 |
pane-navigator-items-group |
ペイン ナビゲーター コンポーネントの項目グループ。 |
pane-navigator-items-group-title |
ペイン ナビゲーターの項目グループのタイトル要素。 |
pane-navigator-item |
ペイン ナビゲーターの項目。 |
pane-header-close-button |
ペイン ヘッダーの閉じるボタン。 |
pane-header-maximize-button |
ペイン ヘッダーの最大化ボタン。 |
pane-header-minimize-button |
ペイン ヘッダーの最小化ボタン。 |
pane-header-pin-button |
ペイン ヘッダーのピン固定ボタン。 |
pane-header-unpin-button |
ペイン ヘッダーのピン固定解除ボタン。 |
tabs-maximize-button |
タブの最大化ボタン。 |
tabs-minimize-button |
タブの最小化ボタン。 |
tabs-more-button |
その他のタブ ボタン。 |
context-menu-unpin-button |
コンテキスト メニューのピン固定解除ボタン。 |
context-menu-close-button |
コンテキスト メニューの閉じるボタン。 |
splitter-handle |
スプリッターのハンドル。 |
horizontal |
水平位置を示します。splitter-handle に適用されます。 |
vertical |
垂直位置を示します。splitter-handle に適用されます。 |