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

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

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

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

ドックマネージャーパッケージをインストールするには、以下のコマンドを実行します。

npm install --save igniteui-dockmanager

次に defineCustomElements() 関数をインポートして呼び出します。

import { defineCustomElements } from 'igniteui-dockmanager/loader';

defineCustomElements();

PaneClose イベントのイベントリスナーを追加する方法は以下の通りです。

this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));

カスタマイズ

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` に適用されます。

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

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

カスタマイズ

CSS 変数

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