IgcDockManagerComponent

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

Element: igc-dockmanager

Slots: 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 handl — litterHandle- Slot for custom splitter handle

Constructors

new IgcDockManagerComponent(): IgcDockManagerComponent

Returns IgcDockManagerComponent

Properties

activePane

Determines the active content pane.

activePane: IgcContentPane

allowFloatingPanesResize

Whether floating panes can be resized.

allowFloatingPanesResize: boolean

allowInnerDock

Whether docking inside a pane is allowed.

allowInnerDock: boolean

allowMaximize

Whether maximize action button is displayed for the panes.

allowMaximize: boolean

allowRootDock

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.

allowRootDock: boolean

allowSplitterDock

Whether docking over splitter is allowed

allowSplitterDock: boolean

autoScrollConfig

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).

autoScrollConfig: IgcScrollConfig

closeBehavior

Which panes get affected by close operations.

closeBehavior: IgcPaneActionBehavior

containedInBoundaries

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

containedInBoundaries: boolean

contextMenuMeta

Metadata for rendering the context menu associated with a pane.

contextMenuMeta: IgcContextMenuMetadata

contextMenuPosition

Position to open the context menu.

contextMenuPosition: IgcContextMenuPosition

disableKeyboardNavigation

Disables all keyboard navigation within the dock manager.

disableKeyboardNavigation: boolean

draggedPane

Determines the pane that is currently dragged.

draggedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane

Optional draggedPaneElement

draggedPaneElement: HTMLElement

dropPosition

The drop position (pane) when docking.

dropPosition: IgcDockManagerPoint

dropShadowRect

The bounding rectangle of the drop shadow shown during docking.

dropShadowRect: DOMRect

dropTargetPaneInfo

Contains metadata about the currently targeted drop pane during drag.

dropTargetPaneInfo: IgcDropTargetPaneInfo

enableDragCursor

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).

enableDragCursor: boolean

floatingPaneZIndicesMap

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

floatingPaneZIndicesMap: Map<IgcSplitPane, number>

flyoutPane

Contains metadata about the currently targeted drop pane during drag.

flyoutPane: IgcContentPane

hasCustomMaximizeButton

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

hasCustomMaximizeButton: boolean

hasCustomMinimizeButton

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

hasCustomMinimizeButton: boolean

hoveredPane

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

hoveredPane: IgcContentPane

layout

The layout configuration of the Dock Manager.

layout: IgcDockManagerLayout

maximizedPane

Determines the pane that is currently maximized.

maximizedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane

navigationPaneMeta

Metadata for the pane-navigator overlay.

navigationPaneMeta: IgcPaneNavigatorMetadata

proximityDock

Determines whether docking indicators are displayed while docking

proximityDock: boolean

Optional resourceStrings

The resource strings of the dock manager.

resourceStrings: IgcDockManagerResourceStrings

showHeaderIconOnHover

Which header icons are shown on hover.

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

showPaneHeaders

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

showPaneHeaders: "always" | "onHoverOnly"

templates

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

templates: Map<string, any>

unpinBehavior

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

unpinBehavior: IgcPaneActionBehavior

useFixedSizeOnDock

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.

useFixedSizeOnDock: "horizontal" | "vertical" | "none" | "both"

styles

styles: CSSResult[]

tagName

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

MDN Reference

tagName: "igc-dockmanager" = "igc-dockmanager"

isValidDrop

isValidDrop: boolean

Accessors

direction

Gets the direction of the Dock Manager.

get direction(): string

Returns string

Methods

addEventListener

Inherited from: IgcDockManagerComponent_base

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Parameters

type: K
listener: object
options: boolean | AddEventListenerOptions

Returns void

createAndDispatchEvent

Inherited from: IgcDockManagerComponent_base

createAndDispatchEvent(type: K, detail: D, options: CustomEventInit<D>): CustomEvent<D>

Parameters

type: K
detail: D
options: CustomEventInit<D>

Returns CustomEvent<D>

dropPane

dropPane(): Promise<boolean>

Returns Promise<boolean>

emitEvent

Inherited from: IgcDockManagerComponent_base

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Parameters

type: K
eventInitDict: CustomEventInit<D>

Returns boolean

focusPane

focusPane(contentId: string): Promise<void>

Parameters

contentId: string

Returns Promise<void>

paneFlyoutToggle

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.

paneFlyoutToggle(args: IgcPaneFlyoutEventArgs): CustomEvent<IgcPaneFlyoutEventArgs>

Parameters

args: IgcPaneFlyoutEventArgs

Returns CustomEvent<IgcPaneFlyoutEventArgs>

Example

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';
  }
});

removeEventListener

Inherited from: IgcDockManagerComponent_base

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Parameters

type: K
listener: object
options: boolean | EventListenerOptions

Returns void

removePane

removePane(pane: IgcDockManagerPane): Promise<void>

Parameters

pane: IgcDockManagerPane

Returns Promise<void>

register

register(): void

Returns void

Events

activePaneChanged

activePaneChanged: CustomEvent<IgcActivePaneEventArgs>

floatingPaneResizeEnd

floatingPaneResizeEnd: CustomEvent<IgcFloatingPaneResizeEventArgs>

floatingPaneResizeMove

floatingPaneResizeMove: CustomEvent<IgcFloatingPaneResizeMoveEventArgs>

floatingPaneResizeStart

floatingPaneResizeStart: CustomEvent<IgcFloatingPaneResizeEventArgs>

layoutChange

layoutChange: CustomEvent<IgcLayoutChangeEventArgs>

paneClose

paneClose: CustomEvent<IgcPaneCloseEventArgs>

paneDragEnd

paneDragEnd: CustomEvent<IgcPaneDragEndEventArgs>

paneDragOver

paneDragOver: CustomEvent<IgcPaneDragOverEventArgs>

paneDragStart

paneDragStart: CustomEvent<IgcPaneDragStartEventArgs>

paneFlyoutToggle

paneFlyoutToggle: CustomEvent<IgcPaneFlyoutEventArgs>

paneHeaderConnected

paneHeaderConnected: CustomEvent<IgcPaneHeaderConnectionEventArgs>

paneHeaderDisconnected

paneHeaderDisconnected: CustomEvent<IgcPaneHeaderConnectionEventArgs>

panePinnedToggle

panePinnedToggle: CustomEvent<IgcPanePinnedEventArgs>

paneScroll

paneScroll: CustomEvent<IgcPaneScrollEventArgs>

splitterResizeEnd

splitterResizeEnd: CustomEvent<IgcSplitterResizeEventArgs>

splitterResizeStart

splitterResizeStart: CustomEvent<IgcSplitterResizeEventArgs>

tabHeaderConnected

tabHeaderConnected: CustomEvent<IgcTabHeaderConnectionEventArgs>

tabHeaderDisconnected

tabHeaderDisconnected: CustomEvent<IgcTabHeaderConnectionEventArgs>