Ignite UI Dock Manager

All
  • Public
  • Public/Protected
  • All

Class IgcDockManagerComponent

A powerful, flexible dock manager component for laying out, docking, undocking, pinning, and floating panes of content.

igc-dockmanager

paneHeaderCloseButton - Custom close button for pane headers

tabHeaderCloseButton - Custom close button for tab headers

closeButton - Alias for pane/tab close button

moreTabsButton - Slot for the "more tabs" button

maximizeButton - Slot for maximize buttons

minimizeButton - Slot for minimize buttons

pinButton - Slot for pin buttons

unpinButton - Slot for unpin buttons

moreOptionsButton - Slot for more-options buttons on tab headers

splitterHandle- Slot for custom splitter handle

activePaneChanged - Emitted when the active content pane changes

floatingPaneResizeStart - Emitted when a floating pane resize interaction begins

floatingPaneResizeMove - Emitted while a floating pane is being resized

floatingPaneResizeEnd - Emitted when a floating pane resize interaction ends

layoutChange - Emitted after the layout has been programmatically updated

paneDragStart - Emitted when a pane drag operation begins

paneDragOver - Emitted repeatedly as a pane is dragged

paneDragEnd - Emitted when a pane drag operation ends

paneHeaderConnected - Emitted when an <igc-pane-header> is connected

paneHeaderDisconnected - Emitted when an <igc-pane-header> is disconnected

paneClose - Emitted when a pane is closed

panePinnedToggle - Emitted when a pane is pinned or unpinned

paneScroll - Emitted when the user scrolls within a pane’s content

splitterResizeStart - Emitted when a splitter resize starts

splitterResizeEnd - Emitted when a splitter resize ends

tabHeaderConnected - Emitted when an <igc-tab-header> is connected

tabHeaderDisconnected - Emitted when an <igc-tab-header> is disconnected

paneFlyoutToggle - Emitted when an unpinned pane's flyout state changes (opens or closes).

Hierarchy

Hierarchy

Implements

  • IgcDockManagerComponentBase

Constructors

Properties

Accessors

Methods

Constructors

Properties

activePane: IgcContentPane | null = null

Determines the active content pane.

null
allowFloatingPanesResize: boolean = true

Whether floating panes can be resized.

true
allowInnerDock: boolean = true

Whether docking inside a pane is allowed.

true
allowMaximize: boolean = true

Whether maximize action button is displayed for the panes.

true
allowRootDock: boolean = true

Determines whether docking into the root-level pane is allowed.

When set to true (default), panes can be docked directly into the root container. This is done by creating a new root pane and repositioning the existing root pane as a sibling to the newly docked content pane.

true
allowSplitterDock: boolean = false

Whether docking over splitter is allowed

false
autoScrollConfig: IgcScrollConfig = ...

Configuration for edge auto-scrolling behavior during drag & resize operations.

  • edgeThreshold: Distance in pixels from the container's edge that triggers scrolling.
  • scrollSpeed: Number of pixels to scroll per interval (affects scroll rate).
{ edgeThreshold: 20, scrollSpeed: 15 }
closeBehavior: PaneActionBehavior = 'allPanes'

Which panes get affected by close operations.

'allPanes'
containedInBoundaries: boolean = false

Whether pane dragging stops when any of the pane's sides goes outside the DockManager’s bounds.

false
contextMenuMeta: IgcContextMenuMetadata | null = null

Metadata for rendering the context menu associated with a pane.

contextMenuPosition: IgcContextMenuPosition

Position to open the context menu.

disableKeyboardNavigation: boolean = false

Disables all keyboard navigation within the dock manager.

false
draggedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane | null = null

Determines the pane that is currently dragged.

draggedPaneElement?: HTMLElement
dropPosition: IgcDockManagerPoint

The drop position (pane) when docking.

dropShadowRect: DOMRect | null = null

The bounding rectangle of the drop shadow shown during docking.

dropTargetPaneInfo: IgcDropTargetPaneInfo | null = null

Contains metadata about the currently targeted drop pane during drag.

enableDragCursor: boolean = false

Enables changing the mouse cursor when hovering over a tab or pane header.

When set to true, the cursor changes from the default to pointer, indicating that the header can be dragged (e.g., to dock or float the pane).

false
floatingPaneZIndicesMap: Map<IgcSplitPane, number> = ...

Tracks z-index values for floating panes to manage stacking order.

flyoutPane: IgcContentPane | null = null

Contains metadata about the currently targeted drop pane during drag.

hasCustomMaximizeButton: boolean

Indicates whether a custom maximize button is defined via a slot.

hasCustomMinimizeButton: boolean

Indicates whether a custom minimize button is defined via a slot.

hoveredPane: IgcContentPane | null = null

The pane that is currently being hovered during a drag operation.

layout: IgcDockManagerLayout

The layout configuration of the Dock Manager.

maximizedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane

Determines the pane that is currently maximized.

navigationPaneMeta: IgcPaneNavigatorMetadata | null = null

Metadata for the pane-navigator overlay.

null
proximityDock: boolean = false

Determines whether docking indicators are displayed while docking

false
resourceStrings?: IgcDockManagerResourceStrings

The resource strings of the dock manager.

showHeaderIconOnHover: "all" | "none" | "closeOnly" | "moreOptionsOnly" = 'none'

Which header icons are shown on hover.

'none'
showPaneHeaders: "always" | "onHoverOnly" = 'always'

Determines when to display the pane headers - always or on hover of the pane.

always
templates: Map<string, any> = ...

A map of content template references by ID, used for slotting custom pane content.

unpinBehavior: PaneActionBehavior = 'allPanes'

Determines which panes are affected by particular pane action such as closing or unpinning.

allPanes
useFixedSizeOnDock: "none" | "both" | "vertical" | "horizontal" = 'none'

Specifies which docking orientations should apply the FixedSize sizing mode when panes are dynamically created via docking.

Possible values:

  • "none": Do not apply FixedSize on docking (default behavior).
  • "vertical": Apply FixedSize only when panes are docked vertically.
  • "horizontal": Apply FixedSize only when panes are docked horizontally.
  • "both": Apply FixedSize for both vertical and horizontal orientation.

This setting affects only dynamically created panes via user docking actions. It does not apply to programmatically created panes or layout restorations.

"none"
styles: CSSResult[] = ...
tagName: "igc-dockmanager" = 'igc-dockmanager'

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

Accessors

Methods

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: M[K]) => any
    • options: boolean | AddEventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | AddEventListenerOptions

    Returns void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
    • options: boolean | AddEventListenerOptions

    Returns void

  • Emitted when an unpinned pane's flyout state changes (opens or closes).

    This event fires when:

    • An unpinned pane is clicked and its flyout opens to display content
    • An unpinned pane's flyout closes (user clicks elsewhere, switches to another unpinned pane, etc.)
    • Switching between unpinned panes (fires twice: close event for old pane, open event for new pane)

    This event does NOT fire when:

    • A pane is pinned or unpinned using the pin button (use panePinnedToggle for that)
    • A pane is initially unpinned (only subsequent flyout open/close actions)

    Use this event to show/hide auxiliary UI, update summary views, or respond to unpinned pane visibility changes.

    dockManager.addEventListener('paneFlyoutToggle', (event) => {
      const { pane, isOpen } = event.detail;
      if (isOpen) {
        // Unpinned pane opened - show related UI
        summaryPanel.style.display = 'none';
      } else {
        // Unpinned pane closed - hide related UI
        summaryPanel.style.display = 'block';
      }
    });

    Parameters

    • args: IgcPaneFlyoutEventArgs

    Returns CustomEvent<IgcPaneFlyoutEventArgs>

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: M[K]) => any
    • options: boolean | EventListenerOptions

    Returns void

  • Parameters

    • type: string
    • listener: EventListenerOrEventListenerObject
    • options: boolean | EventListenerOptions

    Returns void

  • Type parameters

    Type Parameters

    • K extends keyof HTMLElementEventMap

    Parameters

    • type: K
    • listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any
    • options: boolean | EventListenerOptions

    Returns void