Customizing Web Components Dock Manager

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

    Proximity Dock

    이 모드에서는 조이스틱 표시기가 숨겨져 있고, 도킹은 다른 창의 경계 가까이로 한 창을 드래그하면 가능합니다. 창을 드래그할 때 마우스 커서가 도크 위치에 해당하는 영역에 도달하면 도크 미리보기가 표시됩니다. 마우스를 위로 올리면 드래그된 창이 미리보기 위치에 도킹되어 있습니다. 근접 도킹을 활성화하려면 단순히 다음 설정을 하세요proximityDock property를 참.

    this.dockManager.proximityDock = true;

    Inner Docking

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

    Outer Docking

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

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

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

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

    Focus Panes Programmatically

    이focusPane 방법은 개발자가 원하는 창의 특정contentId 창을 제공함으로써 레이아웃 내에서 동적이고 프로그래밍적으로 집중할 수 있게 합니다.

    this.dockManager.focusPane('content1');

    이 방법을 사용할focusPane 때, 동작은 대상 창의 상태에 따라 달라집니다. 작동 방식은 다음과 같습니다:

    1. 플로팅 창: 창이 떠 있다면, 호출focusPane 하면 초점이 맞춰지고, 활성 창으로 설정하여 다른 떠다니는 창 위에 나타나도록 하세요.

    2. 핀 없는 창: 대상 창이 핀을focusPane 해제하면 창이 열린 상태로 플라이아웃됩니다.

    3. 일반 핀 창: 일반 핀 창의 경우,focusPane 창을 다음과activePane 같이 설정합니다.

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

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

    Auto-hide Pane Headers

    DockManager의 특성을 통해showPaneHeaders 개발자들은 이제 창 헤더layout의 가시성을 제어할 수 있는 유연성을 갖게 되었습니다. 기본적으로 는showPaneHeaders 창 헤더가 항상 보이도록 설정always 되어 있습니다. 이 설정onHoverOnly이 되면 모든 창 헤더가 숨겨지다가 콘텐츠 창의 상단 가장자리에 마우스를 올려놓으면 됩니다. 해당 창 헤더가 나타나고, 마우스가 멀어지면 부드럽게 숨겨집니다. 아래 예시를 살펴보세요:

    Control Inner Docking

    기본적으로 Dock Manager는 사용자가 창을 서로 간편하게 드래그하고 도킹하여 탭을 생성할 수 있게 합니다. 이 기능에 대한 더 많은 제어를 위해 두 가지 속성 -allowInnerDockandacceptsInnerDock를 도입했습니다.

    다음에acceptsInnerDock​IgcContentPane 개발자는 특정 콘텐츠 창 내에서 도킹을 제어할 수 있습니다. 이 속성이 false로 설정되면 사용자는 지정된 창에서 내부 도킹을 수행하는 것이 제한됩니다.

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

    DockManager에서 내부 도킹을 비활성화하고 싶다면, 단순히 설정하세요allowInnerDock 받는 사람 거짓. 이 특성이 최종 사용자가 도크 내부 유리를 허용하는지 여부를 결정합니다.

    this.dockManager.allowInnerDock = false;

    Control Pane Dragging

    이 부동산을 통해containedInBoundaries 개발자는 플로팅 유리의 측면이 항상 DockManager에 포함되는지 제어할 수 있습니다. true로 설정하면, 어느 쪽이든 DockManager 경계를 넘으려 하면 창 드래그가 멈춥니다.

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

    Highlight Resizing Panes

    When users resize panes by dragging a splitter, it is not always obvious which panes are affected, especially in more complex layouts. To make this interaction clearer, the Dock Manager can draw a border around the panes that are currently being resized. This visual cue helps users immediately understand which parts of the layout will grow or shrink as they move the splitter.

    You can enable and style this behavior by configuring the following CSS custom properties on the Dock Manager host element (or a parent element):

    • --igc-resize-target-border-color – controls the color of the resize target border.
    • --igc-resize-target-border-width – controls the thickness of the border (for example, 2px).
    • --igc-resize-target-border-style – controls the border style (for example, solid, dashed).
    igc-dockmanager {
    --igc-resize-target-border-color: #0078d4;
    --igc-resize-target-border-width: 2px;
    --igc-resize-target-border-style: solid;
}

    Once these variables are set, any pane that is impacted by a splitter drag will be wrapped with the configured border for the duration of the resize operation, giving users clear, immediate feedback about which panes are being adjusted.

    Split Panes Fixed Size Mode

    By default, each pane in a split layout receives a relative size compared to its siblings and that size defaults to 100. For example, if you have two sibling panes where the first pane has its size set to 400 and the second one to 200, the first will be twice the size of the second and together they will fill all the available space.

    If, for certain panes, you want explicit pixel-based sizing instead of relative sizing, you can turn on fixed size mode by setting the useFixedSize property of the parent split pane to true. When this property is enabled, all children are sized in pixels based on their size property. In the previous example, the first pane will span 400 pixels and the second pane 200 pixels. Resizing via the splitter changes only the size of the pane you are interacting with, without redistributing space across its siblings.

    As soon as the sum of the child panes' sizes exceeds the available size of the parent, the split pane becomes scrollable. The dock manager now also provides built-in autoscrolling to keep the user focused on their content:

    • When users drag panes toward the edges of a fixed-size root pane, the container scrolls in the direction of the drag so they can easily reach off-screen areas.
    • When users resize panes via the splitter, the container scrolls as needed to reveal newly expanded content.

    For a horizontal split pane, autoscrolling happens to the left or right; for a vertical split pane, it happens to the top or bottom, depending on the direction of the drag or resize.

    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
        }
    ]
}

    분할된 유리 안에 창을 도킹할 때useFixedSize 다음 참 도킹된 창은 (분할된 창 방향에 따라 다름) 플로팅 창과 같은 너비/높이를 갖게 됩니다.

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

    API References