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

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

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

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

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

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>

ドックマネージャーは複数の pane types を定義します。

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

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

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

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

コンテンツペイン

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

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

header プロパティはコンテンツペインのテキストヘッダーを提供するために使用されます。このテキストは複数の場所で描画されます。トップコンテンツペインヘッダー、ペインがタブグループにある場合はタブヘッダー、ペインが固定解除されている場合は固定解除ヘッダーです。headerId、tabHeaderId および 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 プロパティを使用してピン固定が解除されたペインの行き先を設定することも可能です。

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

コンテンツペインを定義するときに、documentOnly プロパティを true に設定して、ペインをドキュメントホストにのみドッキングできるようにすることができます。

コンテンツペインとそのコンテンツに対するユーザーの操作を制限するには、disabled プロパティを true に設定します。これにより、単一のフローティングペインでない限り、すべてのユーザーがペインを操作できなくなります。後者は移動、最大化、または閉じることができるため (最大化および閉じるためのペインの設定に従って)、ユーザーはその下の要素を見ることができますが、そのコンテンツを操作することはできません。

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

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

分割ペイン

IgcSplitPane は、orientation プロパティに基づいてすべての子 panes を水平または垂直に積み重ねるコンテナーペインです。以下は、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'
        }
    ]
}

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

デフォルトでは、分割ペインが空の場合は表示されません。ただし、その動作を変更したい場合は、allowEmpty プロパティを true に設定すると、内部にペインがない場合でも、分割ペインが UI に表示されます。

タブグループペイン

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

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

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

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

タブがないときにタブグループペインを UI に表示する場合は、allowEmpty プロパティを true に設定します。

ドキュメントホスト

IgcDocumentHost コード編集やデザインビュー用の 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"
                    }
                ]
            }
        ]
    }
}

フローティングペイン

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

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'
                }
            ]
        }
    ]
};

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

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

アクティブペイン

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

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

レイアウトの編集

一部のシナリオでは、ペインの追加または削除、方向の変更などによって、Dock Manager のレイアウトをカスタマイズする必要がある場合があります。次に例を示します。

const splitPane = this.dockManager.layout.rootPane.panes[0] as IgcSplitPane;
const contentPane = splitPane.panes[0] as IgcContentPane;
this.dockManager.removePane(contentPane);

これは、レイアウトオブジェクトを更新するだけです。Dock Manager の更新をトリガーして変更を UI に反映するには、レイアウトオブジェクトを再割り当てする必要があります。

this.dockManager.layout = { ...this.dockManager.layout };

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

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

private savedLayout: string;

private saveLayout() {
    this.savedLayout = JSON.stringify(this.dockManager.layout);
}

private loadLayout() {
    this.dockManager.layout = JSON.parse(this.savedLayout);
}

実行時にペインを追加する

コンテンツとペインは、実行時に layout に追加できます。以下の例では、コンテンツ、ドキュメント、およびフローティングペインを追加する方法を確認できます。

イベント

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

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

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

カスタマイズ

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

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

<igc-dockmanager id="dockManager">
    <div slot="content1" class="dockManagerContent">Content 1</div>
    <div slot="content2" class="dockManagerContent">Content 2</div>
    <div slot="content3" class="dockManagerContent">Content 3</div>
    <!-- ... -->

    <button slot="closeButton">x</button>

    <button slot="maximizeButton">
        <img src="https://www.svgrepo.com/show/419558/arrow-top-chevron-chevron-top.svg" alt="" />
    </button>

    <button slot="minimizeButton">
        <img src="https://www.svgrepo.com/show/419557/bottom-chevron-chevron-down.svg" alt="" />
    </button>

    <button slot="pinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="" />
    </button>

    <button slot="unpinButton">
        <img src="https://www.svgrepo.com/show/154123/pin.svg" alt="" />
    </button>
</igc-dockmanager>

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

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

テーマ

ドックマネージャーには、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 属性が設定されていても文字列を使用します。

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

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