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 レイアウトを作成してみましょう。最初に、closeButtonmaximizeButtonminimizeButtonpinButton、および 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-headerpane-header-contentpane-header-actionstab-header に適用されます。
    floating フローティング ペインの配置を示します。pane-headerpane-header-contentpane-header-actions に適用されます。
    window フローティング ウィンドウの配置を示します。pane-headerpane-header-contentpane-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-headertab-strip-areatab-strip-actions に適用されます。
    bottom タブの下位置を示します。tab-headertab-strip-areatab-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 に適用されます。

    API リファレンス