Web Components ドック マネージャーの概要

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

    Web Components ドック マネージャーの例

    この例は、Web Components ドック マネージャのほとんどの機能とドッキング オプションを示しています。

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

    npm install --save igniteui-dockmanager
    

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

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

    使用方法

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

    <igc-dockmanager id="dockManager">
    </igc-dockmanager>
    
    Note

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

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

    import { IgcDockManagerPaneType, IgcSplitPaneOrientation, IgcDockManagerComponent } from 'igniteui-dockmanager';
    
    // ...
    
    this.dockManager = document.getElementById("dockManager") as IgcDockManagerComponent;
    this.dockManager.layout = {
        rootPane: {
            type: IgcDockManagerPaneType.splitPane,
            orientation: IgcSplitPaneOrientation.horizontal,
            panes: [
                {
                    type: IgcDockManagerPaneType.contentPane,
                    contentId: 'content1',
                    header: 'Pane 1'
                }
            ]
        }
    };
    

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

    <igc-dockmanager id="dockManager">
        <div slot="content1" style="width: 100%; height: 100%;">Content 1</div>
    </igc-dockmanager>
    

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

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

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

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

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

    コンテンツ ペイン

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

    const contentPane: IgcContentPane = {
        type: IgcDockManagerPaneType.contentPane,
        contentId: 'content1',
        header: 'Pane 1'
    }
    

    header プロパティはコンテンツ ペインのテキスト ヘッダーを提供するために使用されます。このテキストは複数の場所で描画されます。トップコンテンツペインヘッダー、ペインがタブグループにある場合はタブヘッダー、ペインが固定解除されている場合は固定解除ヘッダーです。headerIdtabHeaderId および unpinnedHeaderId プロパティを使用してそれぞれこれらの場所にカスタム スロット コンテンツを提供できます。これらのプロパティのいずれかが設定されていない場合、header テキストが使用されます。以下は、タブ ヘッダー スロット コンテンツを提供する方法です。

    <igc-dockmanager id="dockManager">
        <div slot="content1" style="width: 100%; height: 100%;">Content 1</div>
        <span slot="tabHeader1">Pane 1 Tab</span>
    </igc-dockmanager>
    
    const contentPane: IgcContentPane = {
        type: IgcDockManagerPaneType.contentPane,
        contentId: 'content1',
        header: 'Pane 1',
        tabHeaderId: 'tabHeader1'
    }
    

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

    const contentPane = {
        type: IgcDockManagerPaneType.contentPane,
        contentId: 'content1',
        header: 'Pane 1',
        isPinned: false
    }
    

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

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

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

    デフォルトでは、ペインを閉じると、layout オブジェクトから削除されます。ただし、場合によってはペインを一時的に非表示にして後で表示することもできます。layout オブジェクトを変更せずにそれを行うには、コンテンツペインの hidden プロパティを使用できます。プロパティを true に設定すると UI から非表示になりますが、layout オブジェクトに残ります。デフォルトの閉じる動作をオーバーライドするには、このように paneClose イベントにサブスクライブできます。

    this.dockManager.addEventListener('paneClose', ev => {
        for (const pane of ev.detail.panes) {
            pane.hidden = true;
        }
        ev.preventDefault();
    });
    

    分割ペイン

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

    const splitPane: IgcSplitPane = {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgcDockManagerPaneType.contentPane,
                contentId: 'content1',
                header: 'Pane 1'
            },
            {
                type: IgcDockManagerPaneType.contentPane,
                contentId: 'content2',
                header: 'Pane 2'
            }
        ]
    }
    

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

    タブ グループ ペイン

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

    const tabGroupPane: IgcTabGroupPane = {
        type: IgcDockManagerPaneType.tabGroupPane,
        panes: [
            {
                type: IgcDockManagerPaneType.contentPane,
                contentId: 'content1',
                header: 'Pane 1'
            },
            {
                type: IgcDockManagerPaneType.contentPane,
                contentId: 'content2',
                header: 'Pane 2'
            }
        ]
    }
    

    すべてのタブ ヘッダーを表示する十分なスペースがない場合、タブ グループは非表示タブを含む [その他のタブ] メニューを表示します。そのメニューのタブ項目をクリックすると、タブが選択され、最初の位置に移動します。

    タブは、それらが配置されているタブ グループから切り離さずに並べ替えることもできます。タブをクリックして、希望の位置まで左または右にドラッグできます。選択したタブをタブ領域の外にドラッグすると、フローティング ペインにデタッチされます。

    ドキュメント ホスト

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

    const docHost: IgcDocumentHost = {
        type: IgcDockManagerPaneType.documentHost,
        rootPane: {
            type: IgcDockManagerPaneType.splitPane,
            orientation: IgcSplitPaneOrientation.horizontal,
            panes: [
                {
                    type: IgcDockManagerPaneType.tabGroupPane,
                    panes: [
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content1',
                            header: 'Grid'
                        },
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content4',
                            header: 'List'
                        }
                    ]
                }
            ]
        }
    }
    

    フローティング ペイン

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

    const layout: IgcDockManagerLayout = {
        rootPane: {
            // ...
        },
        floatingPanes: [
            {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                floatingLocation: { x: 80, y: 80 },
                floatingWidth: 200,
                floatingHeight: 150,
                floatingResizable: true,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content1',
                        header: 'Floating Pane 1'
                    }
                ]
            }
        ]
    };
    

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

    floatingResizableallowFloatingPanesResize を使用して、フローティング ペインのサイズ変更を許可するかどうかを設定できます。allowFloatingPanesResizeIgcDockManagerComponent プロパティであるため、値が false に設定されている場合、フローティング ペインのサイズを変更することはできません。floatingResizable プロパティは、floatPanes 配列の各分割ペインに個別に適用できます。プロパティ値が設定されていない場合、デフォルトで allowFloatingPanesResize プロパティの値になります。floatingResizable プロパティが特定のペインに設定されている場合、その値は allowFloatingPanesResize プロパティ値に優先されます。

    アクティブ ペイン

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

    this.dockManager.addEventListener('activePaneChanged', ev => {
        console.log(ev.detail.oldPane);
        console.log(ev.detail.newPane);
    });
    

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

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

    private savedLayout: string;
    
    private saveLayout() {
        this.savedLayout = JSON.stringify(this.dockManager.layout);
    }
    
    private loadLayout() {
        this.dockManager.layout = JSON.parse(this.savedLayout);
    }
    

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

    const layout = this.dockManager.layout;
    layout.rootPane.orientation = IgcSplitPaneOrientation.vertical;
    this.dockManager.layout = { ...layout };
    

    イベント

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

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

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

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

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

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

    ドッキング

    • 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 タブ ヘッダー コンポーネント。
    selected 選択状態を示します。tab-header に適用されます。
    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 ペイン ナビゲーターの項目。

    テーマ

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

    @import '~igniteui-dockmanager/dist/collection/styles/igc.themes';
    
    <igc-dockmanager class="dark-theme">
    

    ローカライズ

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

    import { addResourceStrings } from 'igniteui-dockmanager';
    
    const dockManagerStringsFr: IgcDockManagerResourceStrings = {
      close: 'Fermer',
      // ...
    };
    
    addResourceStrings('fr', dockManagerStringsFr);
    

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