Web Components Dock Manager のカスタマイズ

    Infragistics Web Components Dock Manager コンポーネントは、特定のアプリケーション要件に合わせてレイアウトをさらにカスタマイズするために必要なプロパティを提供します。 Web Components DockManager がどのようにして優れたユーザー インターフェイスを作成し、アプリケーションの生産性を向上させることができるのかを詳しく見ていきましょう。

    Proximity Dock (近接ドック)

    このモードでは、ジョイスティック インジケーターが非表示になり、ペインを別のペインの境界近くにドラッグすることでドッキングを実行できます。ペインのドラッグ中にマウス カーソルがドック位置に対応する領域に到達すると、ドック プレビューが表示されます。マウスを上に置くと、ドラッグされたペインがプレビューされた場所にドッキングされます。近接ドッキングを有効にするには、proximityDock プロパティを true に設定するだけです。

    this.dockManager.proximityDock = true;
ts

    内側ドッキング

    ドラッグしたペイン 1 をペイン 2 に右ドッキングするには、カーソルがペイン 2 の右境界線と左にオフセットされた右境界線によって定義される領域内にある必要があります。オフセット距離は近接ドックしきい値として指定され、50px の値に設定されます。スプリッターがある場合は、スプリッターの両側からドッキングできます。

    外側ドッキング

    外側ドックを実行するには、まず特定の基準を満たす必要があります。Dock Manager では、外側のドッキングはドキュメント ホスト内でのみ許可されます。つまり、ターゲット ペインをドキュメント ホストの外側の領域にドッキングすることになります。

    近接ドックのしきい値の 50 ピクセルは変更されず、これは基本的に、このシナリオでは内側ドッキングに使用できるのは 25 ピクセルの領域のみであることを意味します。オフセット距離は近接ドックの外側しきい値として指定され、明示的に 25 ピクセルの値に設定されます。近接ドックのしきい値の 50 ピクセルは変更されず、これは基本的に、このシナリオでは内側ドッキングに使用できるのは 25 ピクセルの領域のみであることを意味します。ドキュメント ホスト内にスプリッターがある場合は、スプリッターの両側から外側ドックを実行できます。

    注: 近接ドックが有効になっている場合、ユーザーは 1 つのペインから左右および上下の位置の両方に対して外側ドックを実行できません。たとえば、間にスプリッターを備えた 2 つの分割ペインがあるシナリオでは、ドラッグされたペインが左側の分割ペインの上にある場合、ユーザーは外側の左側のドックのみを実行でき、その逆も同様です。

    以下のサンプルをご覧ください:

    EXAMPLE
    TS
    HTML
    DockManagerStyles.css
    index.css
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    Ignite UI for Web Components | CTA Banner

    プログラムによるペインのフォーカス

    focusPane メソッドを使用すると、目的のペインの contentId を指定することで、レイアウト内の特定のペインに動的かつプログラム的にフォーカスすることができます。

    this.dockManager.focusPane('content1');
ts

    focusPane メソッドを使用する場合、対象のペインの状態に応じて動作が異なります。その仕組みは次のとおりです:

    1. フローティング ペイン: ペインがフローティングしている場合、focusPane を呼び出すとそのペインがフォーカスされ、アクティブ ペインとして設定され、他のフローティング ペインの上に表示されるようになります。

    2. ピン固定されていないペイン: ターゲットのペインのピン固定が解除されると、focusPane はペインを開いた状態にポップアップします。

    3. 通常のピン固定ペイン: 通常のピン固定ペインの場合、focusPane はペインを activePane として設定します。

    この方法を利用すると、開発者はユーザーの操作やアプリケーション イベントに基づいてペインの表示と位置を簡単に制御できます。

    以下のサンプルをご覧ください:

    EXAMPLE
    TS
    HTML
    DockManagerStyles.css
    index.css
    Edit in:

    ペイン ヘッダーを自動非表示にする

    DockManager の showPaneHeaders プロパティを使用すると、開発者は layout 内のペイン ヘッダーの表示を柔軟に制御できるようになりました。デフォルトでは、showPaneHeaders は always に設定されており、ペイン ヘッダーが常に表示されます。onHoverOnly に設定すると、コンテンツ ペインの上端にマウスを置くまで、すべてのペイン ヘッダーが非表示になります。対応するペインのヘッダーが表示され、マウスが離れるとスムーズに非表示になります。以下の例を参照してください:

    EXAMPLE
    TS
    HTML
    DockManagerStyles.css
    index.css
    Edit in:

    内側ドッキングの制御

    デフォルトでは、Dock Manager を使用すると、ユーザーはペインを簡単にドラッグして相互にドッキングし、タブを作成できます。この機能をより詳細に制御するために、allowInnerDock と acceptsInnerDock という 2 つのプロパティを導入しました。

    IgcContentPane の acceptsInnerDock プロパティを設定することで、開発者は特定のコンテンツ ペイン内のドッキングを制御できます。このプロパティを false に設定すると、ユーザーは指定されたペインで内側ドッキングを実行できなくなります。

    {
    type: IgcDockManagerPaneType.contentPane,
    header: 'Floating 1',
    contentId: 'content3',
    acceptsInnerDock: false
}
ts

    DockManager 全体で内側ドッキングを無効にしたい場合は、allowInnerDock を false に設定するだけです。このプロパティは、エンド ユーザーがドック ペインの内側にアクセスできるかどうかを決定します。

    this.dockManager.allowInnerDock = false;
ts

    EXAMPLE
    TS
    HTML
    DockManagerStyles.css
    index.css
    Edit in:

    ペイン ドラッグの制御

    containedInBoundaries プロパティを使用すると、開発者はフローティング ペインの側面を常に DockManager 内に含めるかどうかを制御できます。true に設定すると、いずれかの側が DockManager の境界を越えて移動しようとすると、ペインのドラッグが停止します。

    以下の例をご覧ください。

    EXAMPLE
    TS
    HTML
    DockManagerStyles.css
    index.css
    Edit in:

    分割ペインの固定サイズ モード

    ペインのサイズはその兄弟ペインのサイズに相対し、デフォルトは 100 です。2 つの兄弟ペインがあり、最初のペインのサイズが 400 に設定され、2 番目のペインのサイズが 200 に設定されている場合、最初のペインは 2 番目のペインの 2 倍のサイズになり、これら 2 つのペインが使用可能なスペースをすべて埋めてしまいます。

    特定のペインのサイズをピクセル単位で指定する場合は、使用可能なすべてのスペースの相対的な配分に依存するのではなく、親の分割ペインの useFixedSize を設定する必要があります。このプロパティが true に設定されている場合、すべての子のサイズは、size プロパティに基づいてピクセル単位で設定されます。この変更により、最初のペインは 400 ピクセルに広がり、2 番目のペインは 200 ピクセルに広がります。スプリッターを使用してさらにサイズを変更すると、現在のコンテンツ ペインのサイズのみが変更され、兄弟ペインのサイズには影響しません。子ペインのサイズの合計が親ペインのサイズを超えると、スクロールバーが表示され、親の分割ペインをスクロールできるようになります。

    const splitPaneRelativeSize: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1',
            size: 400 // Size will be relative to siblings
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2',
            size: 200 // Size will be relative to siblings
        }
    ]
}

const splitPaneFixedSize: IgcSplitPane = {
    type: IgcDockManagerPaneType.splitPane,
    orientation: IgcSplitPaneOrientation.horizontal,
    useFixedSize: true,
    panes: [
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content3',
            header: 'Pane 3',
            size: 400 // Size will be applied in pixels
        },
        {
            type: IgcDockManagerPaneType.contentPane,
            contentId: 'content4',
            header: 'Pane 4',
            size: 200 // Size will be applied in pixels
        }
    ]
}
ts

    useFixedSize が true に設定されている分割ペイン内にペインをドッキングすると、ドッキングされたペインの幅/高さは (分割ペインの方向に応じて) フローティング ペインと同じになることに注意してください。

    以下のサンプルをご覧ください:

    EXAMPLE
    TS
    HTML
    DockManagerStyles.css
    index.css
    Edit in:

    API リファレンス