Web Components Dock 관리자 | 사용자 정의

Customizing Web Components Dock Manager

Infragistics Web Components Dock Manager 구성 요소는 특정 애플리케이션 요구 사항에 맞게 레이아웃을 추가로 사용자 지정하는 데 필요한 속성을 제공합니다. Web Components DockManager가 어떻게 뛰어난 사용자 인터페이스를 만들고 애플리케이션의 생산성을 향상시킬 수 있는지 자세히 살펴보겠습니다!

Proximity Dock

이 모드에서는 조이스틱 표시기가 숨겨지며 창을 다른 창의 테두리 가까이로 끌어 도킹할 수 있습니다. 창을 드래그하는 동안 마우스 커서가 도킹 위치에 해당하는 영역에 도달하면 도킹 미리보기가 표시됩니다. 마우스를 위로 올리면 드래그된 창이 미리보기된 위치에 도킹됩니다. 근접 도킹을 활성화하려면 proximityDock 속성을 true로 설정하면 됩니다.

this.dockManager.proximityDock = true;
ts

Inner Docking

창 2에서 드래그된 창 1을 오른쪽 도킹하려면 커서가 창 2의 오른쪽 테두리와 왼쪽으로 오프셋된 오른쪽 테두리로 정의된 영역에 있어야 합니다. 오프셋 거리는 근접 도크 임계값으로 지정되며 50px 값으로 설정됩니다. 스플리터가 있는 경우 스플리터 양쪽에서 도킹이 가능합니다.

Outer Docking

외부 도크를 수행하려면 먼저 특정 기준을 충족해야 합니다. Dock Manager에서는 외부 도킹이 문서 호스트 내에서만 허용됩니다. 즉, 대상 창을 문서 호스트의 외부 영역에 도킹하게 됩니다.

예를 들어 외부 상단 도크를 수행하려면 문서 호스트의 상단 테두리로 정의된 영역 내에 있어야 하며 상단 테두리 오프셋 내에 있어야 합니다. 오프셋 거리는 근접 도크 외부 임계값으로 지정되며 명시적으로 25px 값으로 설정됩니다. 근접 도킹 임계값인 50px는 변경되지 않고 유지됩니다. 이는 기본적으로 이 시나리오에서는 내부 도킹에 25px 영역만 사용할 수 있음을 의미합니다. 문서 호스트 내부에 스플리터가 있는 경우 스플리터 양쪽에서 외부 도킹을 수행할 수 있습니다.

참고: 근접 도킹이 활성화되면 사용자는 단일 창에서 왼쪽과 오른쪽, 위쪽과 아래쪽 위치 모두에 대해 외부 도킹을 수행할 수 없습니다. 예를 들어 두 개의 분할 창 사이에 분할기가 있는 시나리오에서 사용자는 드래그된 창이 왼쪽 분할 창 위에 있을 때 외부 왼쪽 도킹만 수행할 수 있고 그 반대의 경우도 마찬가지입니다.

아래 샘플에서 직접 시도해 보세요.

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import {
    IgcDockManagerPaneType,
    IgcSplitPane,
    IgcSplitPaneOrientation,
    IgcDockManagerComponent
} from 'igniteui-dockmanager';

defineCustomElements();

export class DockManagerProximityDock {
    private dockManager: IgcDockManagerComponent;
    private docHostRootPane: IgcSplitPane = {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        allowEmpty: true,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 1',
                        contentId: 'content3'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 2',
                        contentId: 'content4'
                    }
                ]
            }
        ]
    };

    constructor() {
        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
        this.dockManager.dir = 'ltr';
        this.dockManager.proximityDock = true;

        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content1',
                                header: 'Content Pane 1'
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content2',
                                header: 'Unpinned Pane 1',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        size: 200,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.documentHost,
                                size: 200,
                                rootPane: this.docHostRootPane
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content5',
                                header: 'Unpinned Pane 2',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.tabGroupPane,
                                size: 200,
                                panes: [
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content6',
                                        header: 'Tab 1'
                                    },
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content7',
                                        header: 'Tab 2'
                                    },
                                ]
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content8',
                                header: 'Content Pane 2'
                            }
                        ]
                    }
                ]
            },
            floatingPanes: [
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingHeight: 150,
                    floatingWidth: 250,
                    floatingLocation: { x: 300, y: 200 },
                    panes: [
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content9',
                            header: 'Floating Pane 1'
                        },
                    ]
                },
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingLocation: { x: 250, y: 200 },
                    floatingWidth: 250,
                    floatingHeight: 150,
                    panes: [
                      {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content10',
                        header: 'Floating Pane 2'
                      }
                    ],
                  },
            ]
        };
    }
}

new DockManagerProximityDock();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerProximityDock</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
          <igc-dockmanager id="dockManager">
              <div slot="content1">Content 1</div>
              <div slot="content2">Content 2</div>
              <div slot="content3">Content 3</div>
              <div slot="content4">Content 4</div>
              <div slot="content5">Content 5</div>
              <div slot="content6">Content 6</div>
              <div slot="content7">Content 7</div>
              <div slot="content8">Content 8</div>
              <div slot="content9">Content 9</div>
              <div slot="content10">Content 10</div>
          </igc-dockmanager>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html


igc-dockmanager > div {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

Focus Panes Programmatically

focusPane 메서드를 사용하면 개발자는 원하는 창의 contentId 제공하여 레이아웃 내의 특정 창에 동적으로 프로그래밍 방식으로 초점을 맞출 수 있습니다.

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

focusPane 메서드를 사용하는 경우 대상 창의 상태에 따라 동작이 달라집니다. 작동 방식은 다음과 같습니다.

부동 창: 창이 부동인 경우 focusPane 호출하면 해당 창에 초점이 맞춰지고 activePane으로 설정되며 다른 부동 창 위에 표시되는지 확인합니다.
고정 해제된 창: 대상 창이 고정 해제되면 focusPane 창을 열린 상태로 플라이아웃합니다.
Regular Pinned Panes: For regular pinned panes, focusPane will set the pane as the activePane.

이 방법을 활용하면 개발자는 사용자 상호 작용이나 애플리케이션 이벤트를 기반으로 창의 가시성과 위치를 쉽게 제어할 수 있습니다.

아래 샘플에서 직접 시도해 보세요.

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import {
    IgcDockManagerPaneType,
    IgcSplitPane,
    IgcSplitPaneOrientation,
    IgcDockManagerComponent
} from 'igniteui-dockmanager';

defineCustomElements();

export class DockManagerAddContentRuntime {
    private dockManager: IgcDockManagerComponent;
    private docHostRootPane: IgcSplitPane = {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        allowEmpty: true,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 1',
                        contentId: 'content3'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 2',
                        contentId: 'content4'
                    }
                ]
            }
        ]
    };

    constructor() {
        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
        const focusFloatingPaneBtn = document.getElementById('focusFloating');
        const focusUnpinnedPaneBtn = document.getElementById('focusUnpinned');
        const focusRegularPaneBtn = document.getElementById('focusRegular');

        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content1',
                                header: 'Content Pane 1'
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content2',
                                header: 'Unpinned Pane 1',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        size: 200,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.documentHost,
                                size: 200,
                                rootPane: this.docHostRootPane
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content5',
                                header: 'Unpinned Pane 2',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.tabGroupPane,
                                size: 200,
                                panes: [
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content6',
                                        header: 'Tab 1'
                                    },
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content7',
                                        header: 'Tab 2'
                                    },
                                ]
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content8',
                                header: 'Content Pane 2'
                            }
                        ]
                    }
                ]
            },
            floatingPanes: [
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingHeight: 150,
                    floatingWidth: 250,
                    floatingLocation: { x: 300, y: 200 },
                    panes: [
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content9',
                            header: 'Floating Pane 1'
                        },
                    ]
                },
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingLocation: { x: 250, y: 200 },
                    floatingWidth: 250,
                    floatingHeight: 150,
                    panes: [
                      {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content10',
                        header: 'Floating Pane 2'
                      }
                    ],
                  },
            ]
        };

        focusFloatingPaneBtn!.addEventListener('click', () => {
            this.dockManager.focusPane('content9');
        })

        focusUnpinnedPaneBtn!.addEventListener('click', () => {
            this.dockManager.focusPane('content2');
        })

        focusRegularPaneBtn!.addEventListener('click', () => {
            this.dockManager.focusPane('content1');
        })
    }
}

new DockManagerAddContentRuntime();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerFocusPaneProgrammatically</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
          <div class="options horizontal">
            <button id="focusFloating">Focus Floating Pane</button>
            <button id="focusUnpinned">Focus Unpinned Pane</button>
            <button id="focusRegular">Focus pinned pane</button>
          </div>

          <igc-dockmanager id="dockManager">
              <div slot="content1">Content 1</div>
              <div slot="content2">Content 2</div>
              <div slot="content3">Content 3</div>
              <div slot="content4">Content 4</div>
              <div slot="content5">Content 5</div>
              <div slot="content6">Content 6</div>
              <div slot="content7">Content 7</div>
              <div slot="content8">Content 8</div>
              <div slot="content9">Content 9</div>
              <div slot="content10">Content 10</div>
          </igc-dockmanager>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html


igc-dockmanager > div {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Auto-hide Pane Headers

DockManager의 showPaneHeaders 속성을 사용하면 개발자는 이제 layout 내에서 창 헤더의 가시성을 유연하게 제어할 수 있습니다. 기본적으로 showPaneHeaders always 창 헤더가 표시되도록 설정됩니다. onHoverOnly로 설정하면 콘텐츠 창의 상단 가장자리 위로 마우스를 가져갈 때까지 모든 창 헤더가 숨겨집니다. 해당 창 헤더가 나타나고 마우스가 멀어지면 부드럽게 숨겨집니다. 아래 예를 살펴보십시오.

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import {
    IgcDockManagerPaneType,
    IgcSplitPane,
    IgcSplitPaneOrientation,
    IgcDockManagerComponent
} from 'igniteui-dockmanager';

defineCustomElements();

export class DockManagerHidePaneHeaders {
    private dockManager: IgcDockManagerComponent;
    private docHostRootPane: IgcSplitPane = {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        allowEmpty: true,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 1',
                        contentId: 'content3'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 2',
                        contentId: 'content4'
                    }
                ]
            }
        ]
    };

    constructor() {
        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
        this.dockManager.showPaneHeaders = 'onHoverOnly';

        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content1',
                                header: 'Content Pane 1'
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content2',
                                header: 'Unpinned Pane 1',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        size: 200,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.documentHost,
                                size: 200,
                                rootPane: this.docHostRootPane
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content5',
                                header: 'Unpinned Pane 2',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.tabGroupPane,
                                size: 200,
                                panes: [
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content6',
                                        header: 'Tab 1'
                                    },
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content7',
                                        header: 'Tab 2'
                                    },
                                ]
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content8',
                                header: 'Content Pane 2'
                            }
                        ]
                    }
                ]
            },
            floatingPanes: [
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingHeight: 150,
                    floatingWidth: 250,
                    floatingLocation: { x: 300, y: 200 },
                    panes: [
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content9',
                            header: 'Floating Pane 1'
                        },
                    ]
                },
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingLocation: { x: 650, y: 160 },
                    floatingWidth: 250,
                    floatingHeight: 150,
                    panes: [
                      {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content10',
                        header: 'Floating Pane 2'
                      }
                    ],
                  },
            ]
        };
    }
}

new DockManagerHidePaneHeaders();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerHidePaneHeaders</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
          <igc-dockmanager id="dockManager">
              <div slot="content1">Content 1</div>
              <div slot="content2">Content 2</div>
              <div slot="content3">Content 3</div>
              <div slot="content4">Content 4</div>
              <div slot="content5">Content 5</div>
              <div slot="content6">Content 6</div>
              <div slot="content7">Content 7</div>
              <div slot="content8">Content 8</div>
              <div slot="content9">Content 9</div>
              <div slot="content10">Content 10</div>
          </igc-dockmanager>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html


igc-dockmanager > div {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Control Inner Docking

기본적으로 Dock Manager를 사용하면 사용자는 창을 서로 쉽게 끌어서 도킹하여 탭을 만들 수 있습니다. 이 기능에 대한 더 많은 제어를 제공하기 위해 두 가지 속성(allowInnerDock 및 acceptsInnerDock을 도입했습니다.

설정하여 acceptsInnerDock의 재산 IgcContentPane, 개발자는 특정 콘텐츠 창 내부의 도킹을 제어할 수 있습니다. 이 속성을 false로 설정하면 사용자는 지정된 창에서 내부 도킹을 수행할 수 없습니다.

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

DockManager 전체에서 내부 도킹을 비활성화하려면 간단히 allowInnerDock false로 설정하면 됩니다. 이 속성은 최종 사용자가 내부 도킹 창을 사용할 수 있는지 여부를 결정합니다.

this.dockManager.allowInnerDock = false;
ts

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import {
    IgcDockManagerPaneType,
    IgcSplitPane,
    IgcSplitPaneOrientation,
    IgcDockManagerComponent
} from 'igniteui-dockmanager';

defineCustomElements();

export class DockManagerToggleInnerDock {
    private dockManager: IgcDockManagerComponent;
    private docHostRootPane: IgcSplitPane = {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        allowEmpty: true,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 1',
                        contentId: 'content3'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 2',
                        contentId: 'content4'
                    }
                ]
            }
        ]
    };

    constructor() {
        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
        const innerDockBtn = document.getElementById('innerDock');

        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content1',
                                header: 'Content Pane 1'
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content2',
                                header: 'Unpinned Pane 1',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        size: 200,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.documentHost,
                                size: 200,
                                rootPane: this.docHostRootPane
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content5',
                                header: 'Unpinned Pane 2',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.tabGroupPane,
                                size: 200,
                                panes: [
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content6',
                                        header: 'Tab 1'
                                    },
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content7',
                                        header: 'Tab 2'
                                    },
                                ]
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content8',
                                header: 'Content Pane 2'
                            }
                        ]
                    }
                ]
            },
            floatingPanes: [
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingHeight: 150,
                    floatingWidth: 250,
                    floatingLocation: { x: 300, y: 200 },
                    panes: [
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content9',
                            header: 'Floating Pane 1'
                        },
                    ]
                },
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingLocation: { x: 650, y: 160 },
                    floatingWidth: 250,
                    floatingHeight: 150,
                    panes: [
                      {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content10',
                        header: 'Floating Pane 2'
                      }
                    ],
                  },
            ]
        };

        innerDockBtn!.addEventListener('click', () => {
            this.dockManager.allowInnerDock = !this.dockManager.allowInnerDock;
        })
    }
}

new DockManagerToggleInnerDock();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerToggleInnerDock</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
          <div class="options horizontal">
            <button id="innerDock">Toggle Inner Dock</button>
          </div>

          <igc-dockmanager id="dockManager">
              <div slot="content1">Content 1</div>
              <div slot="content2">Content 2</div>
              <div slot="content3">Content 3</div>
              <div slot="content4">Content 4</div>
              <div slot="content5">Content 5</div>
              <div slot="content6">Content 6</div>
              <div slot="content7">Content 7</div>
              <div slot="content8">Content 8</div>
              <div slot="content9">Content 9</div>
              <div slot="content10">Content 10</div>
          </igc-dockmanager>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html


igc-dockmanager > div {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Control Pane Dragging

containedInBoundaries 속성을 사용하면 개발자는 부동 창의 측면이 항상 DockManager 내에 포함되는지 여부를 제어할 수 있습니다. true로 설정하면 측면 중 하나가 DockManager 경계를 넘어 이동하려고 시도하면 창 끌기가 중지됩니다.

아래 예에서 시도해 보세요.

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import {
    IgcDockManagerPaneType,
    IgcSplitPane,
    IgcSplitPaneOrientation,
    IgcDockManagerComponent
} from 'igniteui-dockmanager';

defineCustomElements();

export class DockManagerContainedInBoundaries {
    private dockManager: IgcDockManagerComponent;
    private docHostRootPane: IgcSplitPane = {
        type: IgcDockManagerPaneType.splitPane,
        orientation: IgcSplitPaneOrientation.horizontal,
        allowEmpty: true,
        panes: [
            {
                type: IgcDockManagerPaneType.tabGroupPane,
                panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 1',
                        contentId: 'content3'
                    },
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        header: 'Document 2',
                        contentId: 'content4'
                    }
                ]
            }
        ]
    };

    constructor() {
        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;

        const inBoundariesBtn = document.getElementById('inBoundariesBtn');

        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.horizontal,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content1',
                                header: 'Content Pane 1'
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content2',
                                header: 'Unpinned Pane 1',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        size: 200,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.documentHost,
                                size: 200,
                                rootPane: this.docHostRootPane
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content5',
                                header: 'Unpinned Pane 2',
                                isPinned: false
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.vertical,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.tabGroupPane,
                                size: 200,
                                panes: [
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content6',
                                        header: 'Tab 1'
                                    },
                                    {
                                        type: IgcDockManagerPaneType.contentPane,
                                        contentId: 'content7',
                                        header: 'Tab 2'
                                    },
                                ]
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content8',
                                header: 'Content Pane 2'
                            }
                        ]
                    }
                ]
            },
            floatingPanes: [
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingHeight: 150,
                    floatingWidth: 250,
                    floatingLocation: { x: 300, y: 200 },
                    panes: [
                        {
                            type: IgcDockManagerPaneType.contentPane,
                            contentId: 'content9',
                            header: 'Floating Pane 1'
                        },
                    ]
                },
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingLocation: { x: 650, y: 160 },
                    floatingWidth: 250,
                    floatingHeight: 150,
                    panes: [
                      {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: 'content10',
                        header: 'Floating Pane 2'
                      }
                    ],
                  },
            ]
        };

        inBoundariesBtn!.addEventListener('click', () => {
            this.dockManager.containedInBoundaries = !this.dockManager.containedInBoundaries;
        })
    }
}

new DockManagerContainedInBoundaries();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerContainedInBoundaries</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
          <div class="options horizontal">
            <button id="inBoundariesBtn">Toggle In Boundaries</button>
          </div>

          <igc-dockmanager id="dockManager">
              <div slot="content1">Content 1</div>
              <div slot="content2">Content 2</div>
              <div slot="content3">Content 3</div>
              <div slot="content4">Content 4</div>
              <div slot="content5">Content 5</div>
              <div slot="content6">Content 6</div>
              <div slot="content7">Content 7</div>
              <div slot="content8">Content 8</div>
              <div slot="content9">Content 9</div>
              <div slot="content10">Content 10</div>
          </igc-dockmanager>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html


igc-dockmanager > div {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Split Panes Fixed Size Mode

기본적으로 창의 크기는 형제 창의 크기를 기준으로 하며 기본값은 100입니다. 두 개의 형제 창이 있는 경우 첫 번째 창의 크기가 400으로 설정되고 두 번째 창의 크기가 200으로 설정된 경우 첫 번째 창은 두 번째 창의 두 배가 되며 이 두 창은 사용 가능한 모든 공간을 채웁니다.

특정 창의 경우 사용 가능한 모든 공간의 상대적 분포에 의존하는 대신 크기를 픽셀 단위로 지정하려면 부모 분할 창의 를 useFixedSize 설정해야 합니다. 이 속성을 true로 설정하면 모든 자식의 크기가 해당 속성에 따라 size 픽셀 단위로 조정됩니다. 이 수정을 통해 첫 번째 창은 400픽셀에 걸쳐 있고 두 번째 창은 200픽셀에 걸쳐 있습니다. 분할자를 통해 크기를 추가로 조정하면 형제의 크기에 영향을 주지 않고 현재 콘텐츠 창의 크기만 변경됩니다. 자식 창의 크기 합계가 부모 창의 크기를 초과하면 스크롤 막대가 나타나 부모 분할 창을 스크롤할 수 있습니다.

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

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

분할 창 안에 창을 도킹할 때 useFixedSize로 설정 참 그러면 도킹된 창은 부동 창과 동일한 너비/높이(분할 창 방향에 따라 다름)를 갖게 됩니다.

아래 샘플에서 직접 시도해 보세요.

import './DockManagerStyles.css'
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import {
    IgcDockManagerPaneType,
    IgcSplitPaneOrientation,
    IgcDockManagerComponent
} from 'igniteui-dockmanager';

defineCustomElements();

export class DockManagerSplitPaneFixedSize {
    private dockManager: IgcDockManagerComponent;

    constructor() {
        this.dockManager = document.getElementById('dockManager') as IgcDockManagerComponent;
        this.dockManager.dir = 'ltr';

        this.dockManager.layout = {
            rootPane: {
                type: IgcDockManagerPaneType.splitPane,
                orientation: IgcSplitPaneOrientation.vertical,
                useFixedSize: true,
                panes: [
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.horizontal,
                        size: 300, // Size will be applied in pixels
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content1',
                                header: 'Pane 1',
                                size: 400 // Size will be relative to siblings
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content2',
                                header: 'Pane 2',
                                size: 200 // Size will be relative to siblings
                            }
                        ]
                    },
                    {
                        type: IgcDockManagerPaneType.splitPane,
                        orientation: IgcSplitPaneOrientation.horizontal,
                        size: 200, // Size will be applied in pixels
                        useFixedSize: true,
                        panes: [
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content3',
                                header: 'Pane 3',
                                size: 400 // Size will be applied in pixels
                            },
                            {
                                type: IgcDockManagerPaneType.contentPane,
                                contentId: 'content4',
                                header: 'Pane 4',
                                size: 200 // Size will be applied in pixels
                            }
                        ]
                    }
                ]
            },
            floatingPanes: [
                {
                    type: IgcDockManagerPaneType.splitPane,
                    orientation: IgcSplitPaneOrientation.horizontal,
                    floatingLocation: { x: 250, y: 100 },
                    floatingWidth: 250,
                    floatingHeight: 150,
                    panes: [
                    {
                        type: IgcDockManagerPaneType.contentPane,
                        contentId: "content5",
                        header: "Pane 5"
                    }
                    ]
                }
            ]
        };
    }
}

new DockManagerSplitPaneFixedSize();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DockManagerSplitPaneFixedSize</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
          <igc-dockmanager id="dockManager">
              <div slot="content1">Relative size: 400</div>
              <div slot="content2">Relative size: 200</div>
              <div slot="content3">Fixed size: 400 px</div>
              <div slot="content4">Fixed size: 200 px</div>
              <div slot="content5">Floating pane</div>
          </igc-dockmanager>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html


igc-dockmanager > div {
    padding: 0.5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    flex-direction: column;
    /* background: orange; */
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Customizing Web Components Dock Manager

Proximity Dock

Inner Docking

Outer Docking

Focus Panes Programmatically

Auto-hide Pane Headers

Control Inner Docking

Control Pane Dragging

Split Panes Fixed Size Mode

API References