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

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

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

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbDockManager @ref="dockManager" Layout="Layout" Height="100%" Width="100%">
            <div slot="content1">Content 1 - pane docked to left side</div>
            <div slot="content2">Content 2 - pane pinned to left side</div>
            <div slot="content3">Content 3 - document pane</div>
            <div slot="content4">Content 4 - document pane</div>
            <div slot="content5">Content 5</div>
            <div slot="content6">Content 6 - tab pane 1</div>
            <div slot="content7">Content 7 - tab pane 2</div>
            <div slot="content8">Content 8 - pane docked bottom right</div>
            <div slot="content9">Content 9 - floating pane</div>
        </IgbDockManager>
    </div>
</div>

@code {

    public IgbDockManager dockManager { get; set; }
    public IgbDockManagerLayout Layout { get; set; }

    protected override void OnInitialized()
    {

        Layout = new IgbDockManagerLayout();
        Layout.RootPane = new IgbSplitPane();
        Layout.RootPane.PaneType = DockManagerPaneType.SplitPane;
        Layout.RootPane.Orientation = SplitPaneOrientation.Horizontal;

        IgbSplitPane rootsplitPane1 = new IgbSplitPane
            {
                PaneType = DockManagerPaneType.SplitPane,
                Orientation = SplitPaneOrientation.Vertical,
            };

        IgbContentPane contentPane1 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Content Pane 1",
                ContentId = "content1"
            };

        IgbContentPane contentPane2 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Unpinned Pane 1",
                ContentId = "content2",
                IsPinned = false
            };

        IgbSplitPane splitPane2 = new IgbSplitPane
            {
                PaneType = DockManagerPaneType.SplitPane,
                Orientation = SplitPaneOrientation.Vertical,
                Size = 200,
            };

        IgbDocumentHost documentHost1 = new IgbDocumentHost
            {
                PaneType = DockManagerPaneType.DocumentHost,
                Size = 200,
            };

        IgbSplitPane documentHost1RootSplitPane = new IgbSplitPane
            {
                PaneType = DockManagerPaneType.SplitPane,
                Orientation = SplitPaneOrientation.Horizontal,
            };

        IgbTabGroupPane tabGroupPane1 = new IgbTabGroupPane
            {
                PaneType = DockManagerPaneType.TabGroupPane,

            };

        IgbContentPane documentContentPane1 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Document 1",
                ContentId = "content3"
            };

        IgbContentPane documentContentPane2 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Document 2",
                ContentId = "content4"
            };

        IgbContentPane contentPane5 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content5",
                Header = "Unpinned Pane 2",
                IsPinned = false
            };

        IgbSplitPane rootsplitPane2 = new IgbSplitPane
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,

        };

        IgbTabGroupPane tabGroupPane2 = new IgbTabGroupPane
            {
                PaneType = DockManagerPaneType.TabGroupPane,
                Size = 200,

            };

        IgbContentPane tabGroupContentPane1 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content6",
                Header = "Tab 1"
            };
        IgbContentPane tabGroupContentPane2 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content7",
                Header = "Tab 2"
            };
        IgbContentPane tabGroupContentPane3 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content8",
                Header = "Tab 3"
            };
        IgbContentPane tabGroupContentPane4 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content9",
                Header = "Tab 4"
            };
        IgbContentPane tabGroupContentPane5 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content10",
                Header = "Tab 5"
            };

        IgbContentPane contentPane6 = new IgbContentPane
        {
            PaneType = DockManagerPaneType.ContentPane,
            ContentId = "content11",
            Header = "Content Pane 2"
        };

        IgbSplitPane floatingSplitPane = new IgbSplitPane
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal,
            FloatingHeight = 150,
            FloatingWidth = 250,
            FloatingLocation = new IgbDockManagerPoint { X = 300, Y = 200 },

        };
        IgbContentPane contentPane7 = new IgbContentPane
        {
            PaneType = DockManagerPaneType.ContentPane,
            ContentId = "content12",
            Header = "Floating Pane"
        };

        rootsplitPane1.Panes.Add(contentPane1);
        rootsplitPane1.Panes.Add(contentPane2);
        splitPane2.Panes.Add(documentHost1);
        splitPane2.Panes.Add(contentPane5);
        documentHost1.RootPane = documentHost1RootSplitPane;
        documentHost1RootSplitPane.Panes.Add(tabGroupPane1);
        tabGroupPane1.Panes.Add(documentContentPane1);
        tabGroupPane1.Panes.Add(documentContentPane2);
        rootsplitPane2.Panes.Add(tabGroupPane2);
        tabGroupPane2.Panes.Add(tabGroupContentPane1);
        tabGroupPane2.Panes.Add(tabGroupContentPane2);
        tabGroupPane2.Panes.Add(tabGroupContentPane3);
        tabGroupPane2.Panes.Add(tabGroupContentPane4);
        tabGroupPane2.Panes.Add(tabGroupContentPane5);
        rootsplitPane2.Panes.Add(contentPane6);
        floatingSplitPane.Panes.Add(contentPane7);
        Layout.RootPane.Panes.Add(rootsplitPane1);
        Layout.RootPane.Panes.Add(rootsplitPane2);
        Layout.FloatingPanes.Add(floatingSplitPane);
    }

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

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

カスタマイズ

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;
}
css

すべて適切に設定できると、カスタマイズされたアイコンとタブ領域を持つ DockManager が表示されます。以下は結果です。

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>

</style>
<div class="container vertical">
    <div class="container vertical">

        <style>
            .dockManagerContent {
                padding: 0.5rem;
                height: calc(100% - 1rem);
                width: calc(100% - 1rem);
                display: flex;
                flex-direction: column;
                /* background: orange; */
            }

            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(context-menu-unpin-button),
            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;
            }
        </style>

        <IgbDockManager @ref="dockManager" Layout="Layout" Height="100%" Width="100%">

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

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

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

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

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

            <div slot="content1">Content 1 - pane docked to left side</div>
            <div slot="content2">Content 2 - pane pinned to left side</div>
            <div slot="content3">Content 3 - document pane</div>
            <div slot="content4">Content 4 - document pane</div>
            <div slot="content5">Content 5</div>
            <div slot="content6">Content 6 - tab pane 1</div>
            <div slot="content7">Content 7 - tab pane 2</div>
            <div slot="content8">Content 8 - pane docked bottom right</div>
            <div slot="content9">Content 9 - floating pane</div>
        </IgbDockManager>
    </div>
</div>

@code {

    public IgbDockManager dockManager { get; set; }
    public IgbDockManagerLayout Layout { get; set; }

    protected override void OnInitialized()
    {

        Layout = new IgbDockManagerLayout();
        Layout.RootPane = new IgbSplitPane();
        Layout.RootPane.PaneType = DockManagerPaneType.SplitPane;
        Layout.RootPane.Orientation = SplitPaneOrientation.Horizontal;

        IgbSplitPane rootsplitPane1 = new IgbSplitPane
            {
                PaneType = DockManagerPaneType.SplitPane,
                Orientation = SplitPaneOrientation.Vertical,
            };

        IgbContentPane contentPane1 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Content Pane 1",
                ContentId = "content1"
            };

        IgbContentPane contentPane2 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Unpinned Pane 1",
                ContentId = "content2",
                IsPinned = false
            };

        IgbSplitPane splitPane2 = new IgbSplitPane
            {
                PaneType = DockManagerPaneType.SplitPane,
                Orientation = SplitPaneOrientation.Vertical,
                Size = 200,
            };

        IgbDocumentHost documentHost1 = new IgbDocumentHost
            {
                PaneType = DockManagerPaneType.DocumentHost,
                Size = 200,
            };

        IgbSplitPane documentHost1RootSplitPane = new IgbSplitPane
            {
                PaneType = DockManagerPaneType.SplitPane,
                Orientation = SplitPaneOrientation.Horizontal,
            };

        IgbTabGroupPane tabGroupPane1 = new IgbTabGroupPane
            {
                PaneType = DockManagerPaneType.TabGroupPane,

            };

        IgbContentPane documentContentPane1 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Document 1",
                ContentId = "content3"
            };

        IgbContentPane documentContentPane2 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                Header = "Document 2",
                ContentId = "content4"
            };

        IgbContentPane contentPane5 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content5",
                Header = "Unpinned Pane 2",
                IsPinned = false
            };

        IgbSplitPane rootsplitPane2 = new IgbSplitPane
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,

        };

        IgbTabGroupPane tabGroupPane2 = new IgbTabGroupPane
            {
                PaneType = DockManagerPaneType.TabGroupPane,
                Size = 200,

            };

        IgbContentPane tabGroupContentPane1 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content6",
                Header = "Tab 1"
            };
        IgbContentPane tabGroupContentPane2 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content7",
                Header = "Tab 2"
            };
        IgbContentPane tabGroupContentPane3 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content8",
                Header = "Tab 3"
            };
        IgbContentPane tabGroupContentPane4 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content9",
                Header = "Tab 4"
            };
        IgbContentPane tabGroupContentPane5 = new IgbContentPane
            {
                PaneType = DockManagerPaneType.ContentPane,
                ContentId = "content10",
                Header = "Tab 5"
            };

        IgbContentPane contentPane6 = new IgbContentPane
        {
            PaneType = DockManagerPaneType.ContentPane,
            ContentId = "content11",
            Header = "Content Pane 2"
        };

        IgbSplitPane floatingSplitPane = new IgbSplitPane
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal,
            FloatingHeight = 150,
            FloatingWidth = 250,
            FloatingLocation = new IgbDockManagerPoint { X = 300, Y = 200 },

        };
        IgbContentPane contentPane7 = new IgbContentPane
        {
            PaneType = DockManagerPaneType.ContentPane,
            ContentId = "content12",
            Header = "Floating Pane"
        };

        rootsplitPane1.Panes.Add(contentPane1);
        rootsplitPane1.Panes.Add(contentPane2);
        splitPane2.Panes.Add(documentHost1);
        splitPane2.Panes.Add(contentPane5);
        documentHost1.RootPane = documentHost1RootSplitPane;
        documentHost1RootSplitPane.Panes.Add(tabGroupPane1);
        tabGroupPane1.Panes.Add(documentContentPane1);
        tabGroupPane1.Panes.Add(documentContentPane2);
        rootsplitPane2.Panes.Add(tabGroupPane2);
        tabGroupPane2.Panes.Add(tabGroupContentPane1);
        tabGroupPane2.Panes.Add(tabGroupContentPane2);
        tabGroupPane2.Panes.Add(tabGroupContentPane3);
        tabGroupPane2.Panes.Add(tabGroupContentPane4);
        tabGroupPane2.Panes.Add(tabGroupContentPane5);
        rootsplitPane2.Panes.Add(contentPane6);
        floatingSplitPane.Panes.Add(contentPane7);
        Layout.RootPane.Panes.Add(rootsplitPane1);
        Layout.RootPane.Panes.Add(rootsplitPane2);
        Layout.FloatingPanes.Add(floatingSplitPane);
    }

}razor

以下は、すべてのボタンとスプリッターハンドルのスロット名のリストです。

スロット名	説明
`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 パーツのいくつかを使用してドックマネージャーをカスタマイズする機能を紹介します。

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@inject IJSRuntime JSRuntime
@using IgniteUI.Blazor.Controls
@using System.Timers

<style>
:root {
--main-color: rgb(227,230,233);
--secondary-color: rgb(113,115,116);
--white: #ffffff;
--font-color: rgb(113,115,116);
display: flex;
flex-direction: column;
height: 100%;
}

.size-small {
--ig-size: var(--ig-size-small);
}

.size-medium {
--ig-size: var(--ig-size-medium);
}

.size-large {
--ig-size: var(--ig-size-large);
}

igc-dockmanager {
background-color: var(--main-color);
padding: 20px;
}

igc-dockmanager::part(pane-header) {
background-color: var(--white);
border-bottom: 2px solid var(--main-color);
}

igc-dockmanager::part(pane-header active) {
font-weight: 700;
color: var(--secondary-color);
box-shadow: none;
border-bottom: 2px solid var(--secondary-color);
}

igc-dockmanager::part(pane-header-content) {
color: rgba(104, 97, 97, 0.938);
}

igc-dockmanager::part(splitter) {
flex: 0 0 15px;
}

igc-dockmanager::part(splitter-base) {
background: transparent;
}

igc-dockmanager::part(splitter-base)::after {
content: none;
}

igc-dockmanager::part(content-pane) {
border-radius: 10px;
}

igc-dockmanager::part(tab-header bottom) {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: var(--main-color);
}

igc-dockmanager::part(tab-header active selected bottom) {
font-weight: 700;
color: var(--secondary-color);
box-shadow: inset 0 2px 0 0 var(--secondary-color);
}

igc-dockmanager::part(tab-strip-area bottom) {
border-radius: 0 0 10px 10px;
border-bottom: 2px solid var(--main-color);
background-color: var(--white);
}

igc-dockmanager::part(tab-strip-actions bottom) {
display: none;
}

igc-dockmanager::part(tabs-content) {
border-radius: 10px 10px 0 0;
background-color: var(--white);
}

igc-dockmanager::part(root-docking-indicator),
igc-dockmanager::part(docking-indicator) {
background-color: rgba(49, 45, 49, 0.733);
color: var(--white);
border: none;
border-radius: 5px;
margin: 2px
}

igc-dockmanager::part(docking-preview) {
background-color: var(--main-color);
opacity: 0.7;
}

igc-dockmanager::part(unpinned-pane-header) {
border-radius: 5px;
margin-bottom: 5px;
box-shadow: inset 0 2px 0 0 var(--secondary-color);
background-color: var(--white);
}

igc-dockmanager::part(floating-window) {
border-radius: 10px;
}

.header {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.floatingHeader {
display: flex;
justify-content: space-between;
}

.dockManagerFull {
padding: 0rem;
margin: 0rem;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}

.closeButton {
width: inherit;
border: none;
background: transparent;
color: var(--font-color);
font-size: 14px;
}

.stock-price {
display: flex;
flex-direction: column;
align-items: flex-end;
}

.stock-item-movement-up {
display: flex;
color: rgb(0,153,255);
}

.stock-item-movement-down {
display: flex;
color: rgb(233, 80, 164);
}

igc-avatar::part(image) {
background-color: white;
}

igc-card {
height: inherit;
}

igc-card-content {
padding-top: 5px;
padding-bottom: 0px;
}

/* ACCOUNTS */

.account-content {
display: flex;
flex-direction: row;
justify-content: space-between;
}

/* TOP MOVERS */

.top-movers-content {
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
justify-content: space-evenly;
}

.top-move-stock-item {
margin: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}

/* PHYSICAL CARDS */

.add-card-btn {
display: flex;
justify-content: flex-end;
margin-bottom: 0.5rem;
}

</style>

<style>

</style>
<div id="root">
    <IgbDockManager @ref=dockManager id="dockManager" Height="100%" Width="100%" Layout="Layout">
        <div slot="accountHeader" class="header">
            <span>ACCOUNTS</span>
            <menu-component></menu-component>
        </div>
        <div slot="accountFloatingHeader" class="floatingHeader">
            <span>ACCOUNTS</span>
            <button id="close" class="closeButton">
                <IgbIcon IconName="close" />
            </button>
        </div>
        <div class="dockManagerFull" slot="content1">
            <IgbCard style="overflow-y: auto;" elevated>
                <IgbCardContent>
                    <div class="account-content">
                        <div>
                            <h1>$2980.00</h1>
                            <span style="font-size: 12pt;">United States Dollar</span>
                        </div>

                        <IgbAvatar  style="margin: 0.5rem;" class="size-medium" Src="https://static.infragistics.com/xplatform/images/flags/USA.png"
                                    Shape="@AvatarShape.Rounded">USA</IgbAvatar>
                    </div>
                </IgbCardContent>

                <IgbCardActions>
                    <div>
                        <IgbButton Variant="@ButtonVariant.Fab" class="size-medium" slot="start">
                            Add Money
                        </IgbButton>
                        <IgbButton Variant="@ButtonVariant.Fab" class="size-medium" slot="start">
                            Send
                        </IgbButton>
                    </div>
                </IgbCardActions>
            </IgbCard>
        </div>

        <div slot="todayTopMovers" class="header">
            <span>TODAY'S TOP MOVERS</span>
            <menu-component></menu-component>
        </div>
        <div slot="todayTopMoversFloatingHeader" class="floatingHeader">
            <span>TODAY'S TOP MOVERS</span>
            <button id="close" class="closeButton">
                <IgbIcon IconName="close" />
            </button>
        </div>
        <div class="dockManagerFull" slot="content2" style="overflow-y: auto;">
            <div class="top-movers-content size-large">
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/tesla.png" Shape="@AvatarShape.Circle">TSLA</IgbAvatar>
                    <span>1017,08$</span>
                    <div class="stock-item-movement-down">
                        <IgbIcon @ref=RegisterIconRef IconName="arrow-down" Collection="material"/>
                        12,54%
                    </div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/amc.png" Shape="@AvatarShape.Circle">AMC</IgbAvatar>
                    <span>39,33$</span>
                    <div class="stock-item-movement-down">
                        <IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>
                        12,72%
                    </div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/canoo.png" Shape="@AvatarShape.Circle">GOEV</IgbAvatar>
                    <span>12,33$</span>
                    <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>45,92%</div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/lucid.png" Shape="@AvatarShape.Circle">LCID</IgbAvatar>
                    <span>58,14$</span>
                    <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>29,42%</div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/nio.png" Shape="@AvatarShape.Circle">NIO</IgbAvatar>
                    <span>21,67$</span>
                    <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>7,25%</div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/stoneco.png" Shape="@AvatarShape.Circle">STNE</IgbAvatar>
                    <span>22,48$</span>
                    <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>28,68%</div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/roku.png" Shape="@AvatarShape.Circle">ROKU</IgbAvatar>
                    <span>249,35$</span>
                    <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>9,5%</div>
                </div>
                <div class="top-move-stock-item">
                    <IgbAvatar Src="https://static.infragistics.com/xplatform/images/company/maxar.png" Shape="@AvatarShape.Circle">MAXR</IgbAvatar>
                    <span>33,14$</span>
                    <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>8,12%</div>
                </div>
            </div>
        </div>
        <div slot="transactionsHeader" class="header">
            <span>TRANSACTIONS</span>
            <menu-component></menu-component>
        </div>
        <div slot="transactionsFloatingHeader" class="floatingHeader">
            <span>TRANSACTIONS</span>
            <button id="close" class="closeButton">
                <IgbIcon IconName="close" />
            </button>
        </div>
        <div class="dockManagerFull" slot="content3">
            <IgbList id="list" style="overflow-y: auto;">
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-2.svg" Shape="@AvatarShape.Circle">AMZN</IgbAvatar>
                    <h2 slot="title">Money added via **0000</h2>
                    <span slot="subtitle">14:40</span>
                    <div slot="end" class="stock-price">
                        <span>+ 2000$</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-only.svg" Shape="@AvatarShape.Circle">SET</IgbAvatar>
                    <h2 slot="title">Sports Event Tickets</h2>
                    <span slot="subtitle">Jun 21, 06:15, Declined because your card is inactive</span>
                    <div slot="end" class="stock-price">
                        <span style="text-decoration: line-through;">1017,08 $</span>
                        <span style="color: lightgray;">900,08 $</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-only.svg" Shape="@AvatarShape.Circle">AT</IgbAvatar>
                    <h2 slot="title">Airplane Tickets</h2>
                    <span slot="subtitle">Jun 21, 06:15, Declined because your card is inactive</span>
                    <div slot="end" class="stock-price">
                        <span style="text-decoration: line-through;">985,00 $</span>
                        <span style="color: lightgray;">980,00 $</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/building.svg" Shape="@AvatarShape.Circle">H</IgbAvatar>
                    <h2 slot="title">Hotel</h2>
                    <span slot="subtitle">Jun 21, 06:15</span>
                    <div slot="end" class="stock-price">
                        <span>- 400,00 $</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/atm.svg" Shape="@AvatarShape.Circle">ATM</IgbAvatar>
                    <h2 slot="title">Cash at ATM 000000</h2>
                    <span slot="subtitle">14:40</span>
                    <div slot="end" class="stock-price">
                        <span>- 140$</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-1.svg" Shape="@AvatarShape.Circle">U</IgbAvatar>
                    <h2 slot="title">Utilities</h2>
                    <span slot="subtitle">21/06/2021 16:00</span>
                    <div slot="end" class="stock-price">
                        <span>- 200$</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/atm.svg" Shape="@AvatarShape.Circle">ATM</IgbAvatar>
                    <h2 slot="title">Cash at ATM 000001</h2>
                    <span slot="subtitle">10:10</span>
                    <div slot="end" class="stock-price">
                        <span>- 280$</span>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/cash-2.svg" Shape="@AvatarShape.Circle">MA</IgbAvatar>
                    <h2 slot="title">Money added via **0000</h2>
                    <span slot="subtitle">14:40</span>
                    <div slot="end" class="stock-price">
                        <span>+ 2000$</span>
                    </div>
                </IgbListItem>
            </IgbList>
        </div>

        <div slot="popularStocksHeader" class="header">
            <span>POPULAR STOCKS</span>
            <menu-component></menu-component>
        </div>
        <div slot="popularStocksFloatingHeader" class="floatingHeader">
            <span>POPULAR STOCKS</span>
            <button id="close" class="closeButton">
                <IgbIcon IconName="close" />
            </button>
        </div>
        <div class="dockManagerFull" slot="content4">
            <IgbList id="list" style="overflow-y: auto;">
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/tesla.png" Shape="@AvatarShape.Circle">TSLA</IgbAvatar>
                    <h2 slot="title">Tesla</h2>
                    <span slot="subtitle">TSLA - Electric Vehicles</span>
                    <div slot="end" class="stock-price">
                        <span>1017,08 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>12,54%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/apple.png" Shape="@AvatarShape.Circle">APPL</IgbAvatar>
                    <h2 slot="title">Apple</h2>
                    <span slot="subtitle">APPL - iPhones and Macs</span>
                    <div slot="end" class="stock-price">
                        <span>150,47 $</span>
                        <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>0,2%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/nio.png" Shape="@AvatarShape.Circle">NIO</IgbAvatar>
                    <h2 slot="title">NIO</h2>
                    <span slot="subtitle">NIO - Electric Vehicles</span>
                    <div slot="end" class="stock-price">
                        <span>40,07 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>7,25%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/amazon.png" Shape="@AvatarShape.Circle">AMZN</IgbAvatar>
                    <h2 slot="title">Amazon</h2>
                    <span slot="subtitle">AMZN - E-Commerce</span>
                    <div slot="end" class="stock-price">
                        <span>3582,32 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>2,68%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/gme.png" Shape="@AvatarShape.Circle">GME</IgbAvatar>
                    <h2 slot="title">Game Stop</h2>
                    <span slot="subtitle">GME - Video Games Retail</span>
                    <div slot="end" class="stock-price">
                        <span>205,60 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>5,96%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/amc.png" Shape="@AvatarShape.Circle">AMC</IgbAvatar>
                    <h2 slot="title">AMC</h2>
                    <span slot="subtitle">AMC - Entertainment</span>
                    <div slot="end" class="stock-price">
                        <span>39,33 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>12,72%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/microsoft.png" Shape="@AvatarShape.Circle">MSFT</IgbAvatar>
                    <h2 slot="title">Microsoft</h2>
                    <span slot="subtitle">MSFT - Tech Giant</span>
                    <div slot="end" class="stock-price">
                        <span>335,66 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>0,39%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/spce.png" Shape="@AvatarShape.Circle">SPCE</IgbAvatar>
                    <h2 slot="title">Virgin Galactic</h2>
                    <span slot="subtitle">SPCE - Space Tourism</span>
                    <div slot="end" class="stock-price">
                        <span>18,90 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>1,66%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/pfizer.png" Shape="@AvatarShape.Circle">PFE</IgbAvatar>
                    <h2 slot="title">Pfizer</h2>
                    <span slot="subtitle">PFE - Pharmaceuticals</span>
                    <div slot="end" class="stock-price">
                        <span>49,43 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>0,60%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" src="https://static.infragistics.com/xplatform/images/company/google.png" Shape="@AvatarShape.Circle">GOOGL</IgbAvatar>
                    <h2 slot="title">Alpabet (Class A)</h2>
                    <span slot="subtitle">GOOGL - Tech Giant</span>
                    <div slot="end" class="stock-price">
                        <span>2972,88 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>0,02%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/meta.png" Shape="@AvatarShape.Circle">FB</IgbAvatar>
                    <h2 slot="title">Meta Platforms</h2>
                    <span slot="subtitle">FB - Tech Giant</span>
                    <div slot="end" class="stock-price">
                        <span>347,86 $</span>
                        <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>2,04%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/palantir.png" Shape="@AvatarShape.Circle">PLTR</IgbAvatar>
                    <h2 slot="title">Palantir</h2>
                    <span slot="subtitle">PLTR - Data Analytics</span>
                    <div slot="end" class="stock-price">
                        <span>23,30 $</span>
                        <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>2,06%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/aa.png" Shape="@AvatarShape.Circle">AAL</IgbAvatar>
                    <h2 slot="title">American Airlines</h2>
                    <span slot="subtitle">AAL - Airline Service</span>
                    <div slot="end" class="stock-price">
                        <span>20,45 $</span>
                        <div class="stock-item-movement-up"><IgbIcon IconName="arrow-up" Collection="material"></IgbIcon>0.79%</div>
                    </div>
                </IgbListItem>
                <IgbListItem>
                    <IgbAvatar slot="start" Src="https://static.infragistics.com/xplatform/images/company/netflix.png" Shape="@AvatarShape.Circle">NFLX</IgbAvatar>
                    <h2 slot="title">Netflix</h2>
                    <span slot="subtitle">NFLX - TV Streaming</span>
                    <div slot="end" class="stock-price">
                        <span>679,39 $</span>
                        <div class="stock-item-movement-down"><IgbIcon IconName="arrow-down" Collection="material"></IgbIcon>0,47%</div>
                    </div>
                </IgbListItem>
            </IgbList>
        </div>

        <div slot="cardsHeader" class="header">
            <span>PHYSICAL CARDS</span>
            <menu-component></menu-component>
        </div>
        <div slot="cardsFloatingHeader" class="floatingHeader">
            <span>TODAY'S TOP MOVERS</span>
            <button id="close" class="closeButton">
                <IgbIcon IconName="close" />
            </button>
        </div>
        <div class="dockManagerFull" slot="content5">
            <IgbCard style="overflow-y: auto;" Elevated=true>
                <IgbCardContent>
                    <IgbButton Variant="@ButtonVariant.Flat" class="add-card-btn size-small">
                        + Add Card
                    </IgbButton>
                    <IgbList id="list" style="overflow-y: auto;">
                        <IgbListItem>
                            <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/mastercard.svg" Shape="@AvatarShape.Circle">MC</IgbAvatar>
                            <h2 slot="title">Standard **0000</h2>
                            <span slot="subtitle">Expires on 11/26</span>
                        </IgbListItem>
                        <IgbListItem>
                            <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/visa.svg" Shape="@AvatarShape.Circle">VISA</IgbAvatar>
                            <h2 slot="title">Rose gold **0000</h2>
                            <span slot="subtitle">Expires on 11/24</span>
                        </IgbListItem>
                        <IgbListItem>
                            <IgbAvatar slot="start" Src="https://raw.githubusercontent.com/IgniteUI/material-icons-extended/363c7f3e2da72df5fc2eb63b762a4e69f6fbc603/src/svgs/visa.svg" Shape="@AvatarShape.Circle">VISA</IgbAvatar>
                            <h2 slot="title">Virtual card **0000</h2>
                            <span slot="subtitle">Expires on 10/22</span>
                        </IgbListItem>
                    </IgbList>
                </IgbCardContent>
            </IgbCard>
        </div>
    </IgbDockManager>
</div>

@code {

    public IgbDockManager dockManager { get; set; }
    public IgbDockManagerLayout Layout { get; set; }
    public IgbIcon RegisterIconRef { get; set; }

    private double MaxWidth = 1200;
    private double MinWidth = 800;

    public IgbDockManagerLayout[] layouts;
    private Timer _timer;

    protected override void OnInitialized()
    {

        IgbDockManagerLayout layout1 = this.GetLayout1();
        IgbDockManagerLayout layout2 = this.GetLayout2();
        IgbDockManagerLayout layout3 = this.GetLayout3();

        this.Layout = layout1;
        layouts = new IgbDockManagerLayout[] { layout1, layout2, layout3 };
    }

    public async void TimerElapsed(object sender, ElapsedEventArgs e)
    {
        double dockWidth = await JSRuntime.InvokeAsync<double>("getDockManagerOffset", null);

        if (dockWidth != double.NaN)
        {
            IgbDockManagerLayout newLayout = null;

            if (dockWidth >= this.MaxWidth)
            {
                newLayout = this.layouts[0];
            }
            else if (dockWidth < this.MaxWidth && dockWidth > this.MinWidth)
            {
                newLayout = this.layouts[1];
            }
            else if (dockWidth <= this.MinWidth)
            {
                newLayout = this.layouts[2];
            }

            if (newLayout != null && this.Layout != newLayout && this.dockManager != null)
            {
                this.Layout = newLayout;
                this.dockManager.Layout = this.Layout;
            }
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.RegisterIconRef != null)
        {
            await this.RegisterIconRef.EnsureReady();

            var arrowDown = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 10l5 5 5-5H7z'/></svg>";
            var arrowUp = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 14l5-5 5 5H7z'/></svg>";

            await this.RegisterIconRef.RegisterIconFromTextAsync("arrow-down", arrowDown, "material");
            await this.RegisterIconRef.RegisterIconFromTextAsync("arrow-up", arrowUp, "material");

            if(_timer == null)
            {
                _timer = new Timer();
                _timer.AutoReset = true;
                _timer.Elapsed += TimerElapsed;
                _timer.Interval = 500;
                _timer.Start();
            }
        }
    }

    public IgbContentPane GetContentPane(string header, string contentId, string headerId, string floatingHeaderId)
    {
        var pane = new IgbContentPane()
        {
            PaneType = DockManagerPaneType.ContentPane,
            Header = header,
            ContentId = contentId,
            HeaderId = headerId,
            FloatingHeaderId = floatingHeaderId,
            IsPinned = true,
            AllowMaximize = false,
            AllowPinning = false,
            AllowClose = false
        };

        return pane;
    }

    public IgbDockManagerLayout GetLayout1()
    {
        var accountPane = this.GetContentPane("ACCOUNTS", "content1", "accountHeader", "accountFloatingHeader");
        var topMoversPane = this.GetContentPane("TODAY'S TOP MOVERS", "content2", "todayTopMovers", "todayTopMoversFloatingHeader");
        var transactionsPane = this.GetContentPane("TRANSACTIONS", "content3", "transactionsHeader", "transactionsFloatingHeader");
        var popularStocksPane = this.GetContentPane("POPULAR STOCKS", "content4", "popularStocksHeader", "popularStocksFloatingHeader");
        var cardsPane = this.GetContentPane("PHYSICAL CARDS", "content5", "cardsHeader", "cardsFloatingHeader");

        var splitPane1 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal
        };

        var splitPane2 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 300
        };

        var splitPane3 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal,
            Size = 300
        };

        //AccountPane, CardsPane
        var splitPane4 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 300
        };

        //TransactionsPane
        var splitPane5 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 300
        };

        //Top Movers
        var splitPane6 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal,
            Size = 130
        };

        //Popular Stocks
        var splitPane7 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 200
        };

        splitPane4.Panes.Add(accountPane);
        splitPane4.Panes.Add(cardsPane);

        splitPane5.Panes.Add(transactionsPane);

        splitPane6.Panes.Add(topMoversPane);

        splitPane7.Panes.Add(popularStocksPane);

        splitPane3.Panes.Add(splitPane4);
        splitPane3.Panes.Add(splitPane5);

        splitPane2.Panes.Add(splitPane3);
        splitPane2.Panes.Add(splitPane6);

        splitPane1.Panes.Add(splitPane2);
        splitPane1.Panes.Add(splitPane7);

        IgbDockManagerLayout layout = new IgbDockManagerLayout();
        layout.RootPane = splitPane1;

        return layout;
    }

    public IgbDockManagerLayout GetLayout2()
    {
        var accountPane = this.GetContentPane("ACCOUNTS", "content1", "accountHeader", "accountFloatingHeader");
        var topMoversPane = this.GetContentPane("TODAY'S TOP MOVERS", "content2", "todayTopMovers", "todayTopMoversFloatingHeader");
        var transactionsPane = this.GetContentPane("TRANSACTIONS", "content3", "transactionsHeader", "transactionsFloatingHeader");
        var popularStocksPane = this.GetContentPane("POPULAR STOCKS", "content4", "popularStocksHeader", "popularStocksFloatingHeader");
        var cardsPane = this.GetContentPane("PHYSICAL CARDS", "content5", "cardsHeader", "cardsFloatingHeader");

        IgbSplitPane splitPane1 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal
        };

        IgbSplitPane splitPane2 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 300
        };

        IgbSplitPane splitPane3 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal,
            Size = 300
        };

        //Transactions Pane, TGP1
        IgbSplitPane splitPane4 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 300
        };

        //Popular Stocks Pane
        IgbSplitPane splitPane5 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical,
            Size = 300
        };

        //Top Movers
        IgbSplitPane splitPane6 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Horizontal,
            Size = 130
        };

        //AccountPane, CardsPane
        IgbTabGroupPane tabGroupPane1 = new IgbTabGroupPane()
        {
                PaneType = DockManagerPaneType.TabGroupPane,
                Size = 100
        };

        tabGroupPane1.Panes.Add(accountPane);
        tabGroupPane1.Panes.Add(cardsPane);

        splitPane4.Panes.Add(tabGroupPane1);
        splitPane4.Panes.Add(transactionsPane);

        splitPane5.Panes.Add(popularStocksPane);

        splitPane6.Panes.Add(topMoversPane);

        splitPane3.Panes.Add(splitPane4);
        splitPane3.Panes.Add(splitPane5);

        splitPane2.Panes.Add(splitPane3);
        splitPane2.Panes.Add(splitPane6);

        splitPane1.Panes.Add(splitPane2);

        IgbDockManagerLayout layout = new IgbDockManagerLayout();
        layout.RootPane = splitPane1;

        return layout;
    }

    public IgbDockManagerLayout GetLayout3()
    {
        var accountPane = this.GetContentPane("ACCOUNTS", "content1", "accountHeader", "accountFloatingHeader");
        var topMoversPane = this.GetContentPane("TODAY'S TOP MOVERS", "content2", "todayTopMovers", "todayTopMoversFloatingHeader");
        var transactionsPane = this.GetContentPane("TRANSACTIONS", "content3", "transactionsHeader", "transactionsFloatingHeader");
        var popularStocksPane = this.GetContentPane("POPULAR STOCKS", "content4", "popularStocksHeader", "popularStocksFloatingHeader");
        var cardsPane = this.GetContentPane("PHYSICAL CARDS", "content5", "cardsHeader", "cardsFloatingHeader");

        IgbSplitPane splitPane1 = new IgbSplitPane()
        {
            PaneType = DockManagerPaneType.SplitPane,
            Orientation = SplitPaneOrientation.Vertical
        };

        IgbTabGroupPane tabGroupPane1 = new IgbTabGroupPane()
        {
            PaneType = DockManagerPaneType.TabGroupPane,
            Size = 200
        };

        IgbTabGroupPane tabGroupPane2 = new IgbTabGroupPane()
        {
            PaneType = DockManagerPaneType.TabGroupPane,
            Size = 300
        };

        tabGroupPane1.Panes.Add(accountPane);
        tabGroupPane1.Panes.Add(cardsPane);
        tabGroupPane1.Panes.Add(transactionsPane);

        tabGroupPane2.Panes.Add(popularStocksPane);
        tabGroupPane2.Panes.Add(topMoversPane);

        splitPane1.Panes.Add(tabGroupPane1);
        splitPane1.Panes.Add(tabGroupPane2);

        IgbDockManagerLayout layout = new IgbDockManagerLayout();
        layout.RootPane = splitPane1;

        return layout;
    }
}razor

function getDockManagerOffset() {
    var dockManager = document.querySelector("igc-dockmanager");

    if (dockManager != null) {
        var width = dockManager.offsetWidth;
        return width;
    }
}js

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`	ルートドッキングインジケーター。
`splitter-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` に適用されます。

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

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

カスタマイズ

CSS 変数

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