Blazor Dock Manager 개요

Infragistics Blazor Dock Manager는 창을 통해 애플리케이션의 레이아웃을 관리하는 수단을 제공하며, 최종 사용자는 창을 고정, 크기 조정, 이동, 최대화, 숨기기 등의 기능을 통해 애플리케이션을 더욱 세부적으로 사용자 지정할 수 있습니다.

Blazor Dock Manager Example

이 예에서는 애플리케이션에서 사용할 수 있는 IgbDockManager의 대부분의 기능과 도킹 옵션을 보여줍니다.

EXAMPLE

MODULES

RAZOR

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コピー

@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コピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Customization

Dock Manager 구성 요소는 슬롯과 부품을 사용하여 모든 버튼을 사용자 정의할 수 있는 옵션을 제공합니다. 버튼을 변경하려면 Dock Manager 내에서 고유한 요소를 정의하고 슬롯 속성을 해당 식별자로 설정하기만 하면 됩니다.

이러한 슬롯과 부품을 활용하여 맞춤형 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가 생겼을 것입니다. 그것을 살펴보자:

EXAMPLE

MODULES

RAZOR

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 Variables

다음 표에서는 Dock-manager 구성 요소의 스타일을 지정하는 데 사용되는 모든 CSS 변수를 설명합니다.

CSS 변수	설명
--igc-background-color	창 탐색기 구성 요소 내부 헤더의 배경색입니다.
--igc-accent-color	창 헤더 작업 부분 내부 버튼의 배경색에 초점이 맞춰져 있습니다.
--igc-active-color	활성 상태의 구성 요소에 사용되는 텍스트 및 상자 그림자 색상입니다.
--igc-border-color	창 헤더 구성 요소의 테두리 하단 색상입니다.
--igc-font-family	Dock-manager 구성 요소의 글꼴 모음입니다.
--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	비활성화된 상태의 구성요소의 텍스트 색상입니다.

Keyboard Navigation

키보드 탐색은 Dock Manager의 접근성을 향상시키고 모든 창 탐색, 활성 창 도킹을 통해 여러 방향으로 보기 분할 등과 같은 최종 사용자에게 다양한 상호 작용을 제공합니다.

단축키는 다음과 같습니다.

Docking

• Cmd/Ctrl + Shift + ↑ 전역 상단에 도킹
• Cmd/Ctrl + Shift + ↓ 전역 하단에 도킹
• Cmd/Ctrl + Shift + → 전역 오른쪽으로 도킹
• Cmd/Ctrl + Shift + ← 전역 왼쪽으로 도킹
• Shift + ↑ 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 위에 도킹됩니다.
• Shift + ↓ 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 아래에 도킹됩니다.
• Shift + → 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 오른쪽에 도킹됩니다.
• Shift + ← 탭 그룹에 여러 탭이 있으면 보기가 분할되고 초점이 맞춰진 탭이 왼쪽에 고정됩니다.

Navigating

• Cmd/Ctrl + F6 또는 Cmd/Ctrl + → 문서 호스트의 다음 탭에 초점을 맞춥니다.
• Cmd/Ctrl + Shift + F6 또는 Cmd/Ctrl + ← 문서 호스트의 이전 탭에 초점을 맞춥니다.
• Alt + F6 다음 콘텐츠 창에 초점을 맞춥니다.
• Alt + Shift + F6 이전 콘텐츠 창에 초점을 맞춥니다.

Pane Navigator

다음 키보드 단축키는 창과 문서를 반복할 수 있는 탐색기를 보여줍니다.

• Cmd/Ctrl + F7 또는 Cmd/Ctrl + F8 첫 번째 문서부터 시작합니다.
• Alt + F7 또는 Alt + F8 첫 번째 창부터 시작합니다.
• Cmd/Ctrl + Shift + F7 또는 Cmd/Ctrl + Shift + F8 마지막 문서부터 뒤로 시작합니다.
• Alt + Shift + F7 또는 Alt + Shift + F8 마지막 창에서 뒤로 시작합니다.

Other

• Alt + F3 활성 창을 닫습니다.

샘플 데모에서 위에 언급된 모든 작업을 연습해 보세요.

Styling

Dock Manager는 Shadow DOM을 사용하여 스타일과 동작을 캡슐화합니다. 결과적으로 일반적인 CSS 선택기를 사용하여 내부 요소를 간단히 타겟팅할 수는 없습니다. 이것이 바로 우리가::part CSS 선택기로 타겟팅할 수 있는 구성 요소 부분을 노출하는 이유입니다.

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

다음 예에서는 노출된 CSS 부분 중 일부를 통해 Dock Manager를 사용자 정의하는 기능을 보여줍니다.

EXAMPLE

MODULES

RAZOR

JS

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 Parts

부품명	설명
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.

API References

• IgbDockManager
• IgbDocumentHost
• IgbDockManagerLayout
• IgbContentPane
• IgbSplitPane
• IgbTabGroupPane