React Dock Manager 개요

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

    React Dock Manager Example

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

    Dock Manager 패키지를 설치하려면 다음 명령을 실행하십시오.

    npm install --save igniteui-react-dockmanager

    Usage

    Dock Manager를 가져온 후에는 페이지에 추가할 수 있습니다.

    <IgrDockManager id="dockManager">
</IgrDockManager>

    [!Note] Since the Dock Manager component uses ShadowDOM and slots it is not supported on older browsers like Internet Explorer 11 and Edge 18 and below (non-Chromium versions).

    The Dock Manager has a layout property, which describes the layout of the panes. To start defining a layout, you should set the rootPane property and add child panes. Here is how you can define a layout with a single content pane:

    import {  IgrDockManager, IgrDockManagerPaneType, IgrSplitPaneOrientation } from 'igniteui-react-dockmanager';

// ...

this.dockManager = document.getElementById("dockManager") as IgrDockManager;
this.dockManager.layout = {
    rootPane: {
        type: IgrDockManagerPaneType.splitPane,
        orientation: IgrSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgrDockManagerPaneType.contentPane,
                contentId: 'content1',
                header: 'Pane 1'
            }
        ]
    }
};

    To load the content of the panes, the Dock Manager uses slots. The slot attribute of the content element should match the contentId of the content pane in the layout configuration. It is highly recommended to set width and height of the content elements to 100% for predictable response when the end-user is resizing panes.

    <IgrDockManager id="dockManager">
    <div slot="content1" style={{ width: '100%', height: '100%' }}>Content 1</div>
</IgrDockManager>

    Dock Manager는 여러 창 유형을 정의합니다.

    Each type of pane has a size property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the useFixedSize of the parent split pane.

    최종 사용자는 다음 작업을 수행하여 런타임 시 레이아웃을 사용자 정의할 수 있습니다.

    • 창 고정/고정 해제
    • 창 크기 조정
    • 창 닫기
    • 창을 끌어 부동 상태로 만들기
    • 부동 창 이동
    • 부동 창 도킹
    • 창 최대화

    All of these are reflected in the layout property of the Dock Manager.

    Content Pane

    The IgrContentPane represents a pane with header and content. It can be hosted inside a Split Pane or a Tab Group Pane. Here is how a content pane is defined:

    const contentPane: IgrContentPane = {
    type: IgrDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1'
}

    The header property is used to provide a text header for the content pane. This text is rendered at several places: the top content pane header, the tab header if the pane is in a tab group and the unpinned header if the pane is unpinned. You can provide a custom slot content for each of these places respectively using the headerId, tabHeaderId and unpinnedHeaderId properties. If any of these properties is not set, the header text is used. Here is how to provide a tab header slot content:

    <IgrDockManager id="dockManager">
    <div slot="content1" style={{ width: '100%', height: '100%' }}>Content 1</div>
    <span slot="tabHeader1">Pane 1 Tab</span>
</IgrDockManager>

    const contentPane: IgrContentPane = {
    type: IgrDockManagerPaneType.contentPane,
    contentId: 'content1',
    header: 'Pane 1',
    tabHeaderId: 'tabHeader1'
}

    When a pane is unpinned, it appears as a tab header at one of the edges of the Dock Manager. If the end-user selects it, its content appears over the docked pinned panes. To unpin a content pane, set its isPinned property to false.

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

    The isPinned property affects only content panes that are docked outside a document host. Also, content panes hosted in a floating pane cannot be unpinned.

    By default, the unpin destination for a content pane is calculated automatically based on the location of the pane relative to the document host. When more than one document host is defined, the nearest one in the parent hierarchy of the unpinned content pane will be used. If there is no document host defined, the default location is used - Left. It is also possible to set the desired destination of the unpinned pane by using the unpinnedLocation property.

    You can configure which end-user operations are allowed for a content pane using its allowClose, allowPinning, allowDocking and allowFloating properties.

    When defining a content pane, you can set the documentOnly property to true so the pane can be docked only in a document host.

    To restrict the user interaction with the content pane and its content, you can set the disabled property to true. This will prevent all user interactions with the pane unless it is a single floating pane. The latter could be moved, maximized or closed (according to the pane's settings for maximizing and closing), so the user can have a look at the elements under it but will not be able to interact with its content.

    By default, when you close a pane it gets removed from the layout object. However, in some cases you would want to temporary hide the pane and show it later again. In order to do that without changing the layout object you can use the hidden property of the content pane. Setting the property to true will hide it from the UI, but it will remain in the layout object. In order to override the default close behavior you can subscribe to the PaneClose event like this:

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

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

    Split Pane

    The IgrSplitPane is a container pane which stacks all of its child panes horizontally or vertically based on its orientation property. Here is how a horizontal split pane with two child content panes is defined:

    const splitPane: IgrSplitPane = {
    type: IgrDockManagerPaneType.splitPane,
    orientation: IgrSplitPaneOrientation.horizontal,
    panes: [
        {
            type: IgrDockManagerPaneType.contentPane,
            contentId: 'content1',
            header: 'Pane 1'
        },
        {
            type: IgrDockManagerPaneType.contentPane,
            contentId: 'content2',
            header: 'Pane 2'
        }
    ]
}

    분할 창에는 다른 분할 창을 포함한 모든 창 유형의 하위 창이 포함될 수 있습니다.

    By default, if the split pane is empty it is not displayed. Yet if you would like to change that behavior you can set its allowEmpty property to true and the split pane will be presented in the UI even when there is no panes inside it.

    Tab Group Pane

    The IgrTabGroupPane displays its child content panes as the tabs of a tab component. Here is how a tab group pane with a content pane for each of its two tabs is defined:

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

    모든 탭 헤더를 표시할 공간이 충분하지 않은 경우 탭 그룹에는 보이지 않는 탭이 포함된 추가 탭 메뉴가 표시됩니다. 해당 메뉴에서 탭 항목을 클릭하면 해당 탭이 선택되어 첫 번째 위치로 이동됩니다.

    또한 탭은 탭이 위치한 탭 그룹에서 분리되지 않고 다시 정렬될 수 있습니다. 원하는 탭을 클릭하고 왼쪽이나 오른쪽으로 원하는 위치로 드래그할 수 있습니다. 선택한 탭을 탭 영역 외부로 끌면 해당 탭이 부동 창으로 분리됩니다.

    In case you would like the tab group pane to be displayed in the UI when it has no tabs, you can set the allowEmpty property to true.

    Document Host

    The IgrDocumentHost is an area of tabs for documents, similar to the one in Visual Studio for code editing and design view. Here is how to define a document host with two document tabs:

    const docHost: IgrDocumentHost = {
    type: IgrDockManagerPaneType.documentHost,
    rootPane: {
        type: IgrDockManagerPaneType.splitPane,
        orientation: IgrSplitPaneOrientation.horizontal,
        panes: [
            {
                type: IgrDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgrDockManagerPaneType.contentPane,
                        contentId: 'content1',
                        header: 'Grid'
                    },
                    {
                        type: IgrDockManagerPaneType.contentPane,
                        contentId: 'content4',
                        header: "List"
                    }
                ]
            }
        ]
    }
}

    Floating Pane

    The floating pane is a split pane rendered above all other ones in a floating window. The floating pane definitions are stored in the floatingPanes property of the layout. Here is how to add a floating pane with a single content pane inside:

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

    The floatingLocation, floatingWidth and floatingHeight properties represent absolute dimensions in pixels. Please note that these properties are applied only for the split panes in the floatingPanes array.

    With the floatingResizable and allowFloatingPanesResize you can set whether resizing floating panes is allowed. The allowFloatingPanesResize is an IgcDockManagerComponent property, so if the value is set to false none of the floating panes can be resized. The floatingResizable property can be applied separately on each split pane in the floatingPanes array and if the property value is not set, it defaults to the value of the allowFloatingPanesResize property. If the floatingResizable property is set for a specific pane, its value takes precedence over the allowFloatingPanesResize property value.

    Active Pane

    The Dock Manager component highlights the content pane which contains the focus and exposes it in its activePane property. You can programmatically change the active pane by setting the property. You can also listen for changes of the activePane property by subscribing to the ActivePaneChanged event:

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

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

    Docking

    부동 창을 끌기 시작하면 끌어온 창의 위치에 따라 다른 도킹 표시기가 나타납니다. 도킹에는 루트 도킹, 창 도킹, 문서 호스트 도킹, 스플리터 도킹의 네 가지 주요 유형이 있습니다.

    루트 도킹

    In this type of docking while dragging a pane, four arrow docking indicators will appear close to the four edges of the dock manager. Once released, the dragged pane will become a direct child of the Dock Manager's rootPane. Visually, the newly docked pane will snap into place at the respective edge and occupy up to half of the dock manager's width or height, shifting all the other content to the other half.

    dockmanager-root-docking

    창 도킹

    도킹 표시기는 콘텐츠 창 또는 탭 그룹 창 위로 부동 창을 드래그할 때 중앙에 나타납니다. 놓으면 끌어온 창이 대상 창의 어느 쪽에나 끼워 넣거나 대상 창과 함께 그룹화되어 탭 레이아웃을 만듭니다. 초기 레이아웃과 도킹 위치의 조합에 따라 도킹 작업으로 인해 끌어온 창과 대상 창 모두의 새 부모가 되는 새 분할 또는 탭 그룹 창이 동적으로 생성될 수 있습니다.

    도크매니저-패널-도킹

    문서 호스트 도킹

    끌어온 창이 문서 호스트 위에 있으면 대상 창 또는 전체 문서 호스트를 기준으로 도킹할 수 있는 추가 도킹 표시기가 나타납니다.

    dockmanager-document-host-docking

    스플리터 도킹

    While dragging a floating pane, if the cursor of the mouse is close to any splitter, a docking indicator will appear over it. If the dragged pane is docked it will become a child of the split pane that has the targeted splitter. Splitter docking can be disabled by setting the Dock Manager allowSplitterDock property to false.

    도크매니저-스플리터-도킹

    Update Layout

    일부 시나리오에서는 창 추가 또는 제거, 방향 변경 등을 통해 Dock Manager의 레이아웃을 사용자 정의해야 할 수도 있습니다. 예를 들면 다음과 같습니다.

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

    이렇게 하면 레이아웃 개체만 업데이트됩니다. 변경 사항이 UI에 반영되도록 Dock Manager의 업데이트를 트리거하려면 레이아웃 객체를 다시 할당해야 합니다.

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

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

    Save/Load Layout

    To restore or persist a layout, you simply have to get/set the value of the layout property. Here is how to save the layout as a stringified JSON:

    private savedLayout: string;

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

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

    private savedLayout: string;

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

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

    이벤트

    Dock Manager 컴포넌트는 특정 최종 사용자 상호작용이 실행될 때 이벤트를 발생시킵니다. 예를 들어 창 닫기, 고정, 크기 조정, 드래그 등이 있습니다. 이 주제에서 도크 매니저 이벤트 전체 목록을 확인할 수 있습니다.

    Here is how to add an event listener for the PaneClose event:

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

    Customization

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

    이 슬롯들과 부품들을 활용해 맞춤형 Dock Manager 레이아웃을 만들어 봅시다. 먼저, 저희가 직접 아이콘을 제공할 것입니다. 슬롯을 사용합니다closeButton​maximizeButton​minimizeButton​pinButton​unpinButton:

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

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

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

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

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

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

    그런 다음 스타일시트에서 노출된 부분을 사용하겠습니다. 이렇게 하면 구성 요소의 스타일을 완전히 제어할 수 있습니다.

    igc-dockmanager::part(unpinned-tab-area) {
    background: #bee9ec;
}

igc-dockmanager::part(unpinned-tab-area--left) {
    border-right: 1px dashed #004d7a;
}

igc-dockmanager::part(unpinned-tab-area--bottom) {
    border-top: 1px dashed #004d7a;
}

igc-dockmanager::part(tab-header-close-button),
igc-dockmanager::part(pane-header-close-button) {
    background-color: #e73c7e;
}

igc-dockmanager::part(pane-header-pin-button),
igc-dockmanager::part(pane-header-unpin-button) {
  background: rgb(218, 218, 218);
  border: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

igc-dockmanager::part(tabs-maximize-button),
igc-dockmanager::part(tabs-minimize-button),
igc-dockmanager::part(pane-header-minimize-button),
igc-dockmanager::part(pane-header-maximize-button) {
  width: 24px;
  height: 24px;
  border: none;
  transition: opacity 250ms ease-in-out;
  opacity: 0.3;
  margin-right: 15px;
  margin-top: -5px;
  margin-left: 0px;
}

    모든 것이 순조롭게 진행되었다면 이제 사용자 정의된 아이콘과 탭 영역이 있는 DockManager가 생겼을 것입니다. 그것을 살펴보자:

    아래에서는 모든 버튼의 슬롯 이름과 스플리터 핸들이 포함된 목록을 찾을 수 있습니다.

    슬롯 이름 설명
    closeButton 닫기 버튼.
    paneHeaderCloseButton 창 헤더의 닫기 버튼입니다.
    tabHeaderCloseButton 탭 헤더의 닫기 버튼입니다.
    moreTabsButton 더 많은 탭 버튼.
    moreOptionsButton 더 많은 옵션 버튼.
    maximizeButton 최대화 버튼.
    minimizeButton 최소화 버튼.
    pinButton 핀 버튼.
    unpinButton 고정 해제 버튼.
    splitterHandle 분배기 핸들입니다.

    이 페이지의 스타일링 섹션 아래 CSS 부분에서 각 슬롯의 해당 부분을 찾을 수 있습니다.

    CSS 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 + ← 탭 그룹에 여러 탭이 있으면 보기가 분할되고 포커스가 있는 탭이 왼쪽으로 고정됩니다.
    • 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 부분 중 일부를 통해 Dock Manager를 사용자 정의하는 기능을 보여줍니다.

    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 루트 도킹 표시기입니다.
    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.

    Themes

    Dock Manager에는 밝은 테마와 어두운 테마가 있습니다. 밝은 테마가 기본 테마입니다. 이를 어둡게 변경하려면 CSS에서 igc.themes.css 파일을 가져오고 Dock Manager 또는 상위 항목에 어두운 테마 클래스를 추가하기만 하면 됩니다.

    @import 'igniteui-dockmanager/dist/collection/styles/igc.themes';

    <IgrDockManager class="dark-theme">

    현지화

    Dock Manager 컴포넌트는 컨텍스트 메뉴, 툴팁, 아리아 속성에서 사용되는 문자열을 현지화하는 것을 지원합니다. 기본적으로 Dock Manager는 페이지의 상위 언어 중 어느 하나에서 lang 속성을 검색하여 해당 페이지를 감지합니다. lang 속성이 설정되어 있지 않거나 Dock Manager가 지원하지 않는 값으로 설정되어 있다면, 기본 언어는 영어(en)가 사용됩니다. Dock Manager는 영어(영어),​ ​일본어(jp),​ ​한국어(ko),​ ​스페인어(es)에 대한 내장된 현지화 문자열을 제공합니다.

    The Dock Manager exposes resourceStrings property which allows you to modify the strings. If you set the resourceStrings property, the Dock Manager will use your strings no matter what lang attribute is set.

    API References