Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Class IgrDockManager

A Dock Manager component that provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving, maximizing and hiding panes.

Callable

  • IgrDockManager(): ReactNode

    Returns ReactNode

Events

Methods

Properties

Events

onActivePaneChanged

onActivePaneChanged: (args: CustomEvent<IgrActivePaneEventArgsDetail>) => void

Type declaration

onFloatingPaneResizeEnd

onFloatingPaneResizeEnd: (args: CustomEvent<IgrFloatingPaneResizeEventArgsDetail>) => void

Type declaration

onFloatingPaneResizeMove

onFloatingPaneResizeMove: (args: CustomEvent<IgrFloatingPaneResizeMoveEventArgsDetail>) => void

Type declaration

onFloatingPaneResizeStart

onFloatingPaneResizeStart: (args: CustomEvent<IgrFloatingPaneResizeEventArgsDetail>) => void

Type declaration

onLayoutChange

onLayoutChange: (args: CustomEvent<any>) => void

Type declaration

onPaneClose

onPaneClose: (args: CustomEvent<IgrPaneCloseEventArgsDetail>) => void

Type declaration

onPaneDragEnd

onPaneDragEnd: (args: CustomEvent<IgrPaneDragEndEventArgsDetail>) => void

Type declaration

onPaneDragOver

onPaneDragOver: (args: CustomEvent<IgrPaneDragOverEventArgsDetail>) => void

Type declaration

onPaneDragStart

onPaneDragStart: (args: CustomEvent<IgrPaneDragStartEventArgsDetail>) => void

Type declaration

onPaneHeaderConnected

onPaneHeaderConnected: (args: CustomEvent<IgrPaneHeaderConnectionEventArgsDetail>) => void

Type declaration

onPaneHeaderDisconnected

onPaneHeaderDisconnected: (args: CustomEvent<IgrPaneHeaderConnectionEventArgsDetail>) => void

Type declaration

onPanePinnedToggle

onPanePinnedToggle: (args: CustomEvent<IgrPanePinnedEventArgsDetail>) => void

Type declaration

onPaneScroll

onPaneScroll: (args: CustomEvent<IgrPaneScrollEventArgsDetail>) => void

Type declaration

onSplitterResizeEnd

onSplitterResizeEnd: (args: CustomEvent<any>) => void

Type declaration

onSplitterResizeStart

onSplitterResizeStart: (args: CustomEvent<any>) => void

Type declaration

onTabHeaderConnected

onTabHeaderConnected: (args: CustomEvent<IgrTabHeaderConnectionEventArgsDetail>) => void

Type declaration

onTabHeaderDisconnected

onTabHeaderDisconnected: (args: CustomEvent<IgrTabHeaderConnectionEventArgsDetail>) => void

Type declaration

Methods

addEventListener

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

    Parameters

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

    Returns void

  • addEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void

    Parameters

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

    Returns void

dropPane

  • dropPane(): Promise<boolean>

    Performs drop of the draggedPane into the specified dropPosition. Returns true if the pane has been docked otherwise returns false.

    Returns Promise<boolean>

focusPane

  • focusPane(contentId: string): Promise<void>

    Focuses a pane from the layout.

    Parameters

    • contentId: string

    Returns Promise<void>

removeEventListener

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

    Parameters

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

    Returns void

  • removeEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void

    Parameters

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

    Returns void

removePane

Properties

activePane

activePane: IgrContentPane

Gets/sets the active pane of the Dock Manager.

allowFloatingPanesResize

allowFloatingPanesResize: boolean

Determines whether the end user is allowed to resize floating panes. Defaults to true.

allowInnerDock

allowInnerDock: boolean

Determines whether the end user is allowed to inner dock panes. Defaults to true.

allowMaximize

allowMaximize: boolean

Determines whether the end user is allowed to maximize panes. Defaults to true.

allowSplitterDock

allowSplitterDock: boolean

Determines whether the end user can dock the dragged pane directly in the parent split pane by dragging it over a splitter. If enabled, a docking indicator will be shown over the splitter's drag handler. Defaults to false.

closeBehavior

closeBehavior: IgrPaneActionBehavior

Determines whether the selected pane or all panes are closed when clicking the close button of a pane within a dockable TabGroup. Defaults to 'allPanes'.

containedInBoundaries

containedInBoundaries: boolean

Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to false.

disableKeyboardNavigation

disableKeyboardNavigation: boolean

Disables the built-in keyboard shortcuts for pane navigation. Defaults to false.

draggedPane

draggedPane: IgrContentPane | IgrSplitPane | IgrTabGroupPane

Gets/sets the currently dragged pane.

dropPosition

dropPosition: IgrDockManagerPoint

Gets/sets the current drop position when performing custom drag/drop.

layout

layout: IgrDockManagerLayout

Gets/sets the layout configuration of the Dock Manager.

maximizedPane

maximizedPane: IgrContentPane | IgrSplitPane | IgrTabGroupPane

Gets/sets the maximized pane.

proximityDock

proximityDock: boolean

Determines whether the end user can dock the dragged pane by dragging it close to the target pane edges. If enabled, docking indicators are not visible. Defaults to false.

resourceStrings

resourceStrings: IgrDockManagerResourceStrings

Gets/sets the resource strings.

showHeaderIconOnHover

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

Determines which tab header icons should show when hovering over the tab with the mouse. Defaults to none.

showPaneHeaders

showPaneHeaders: "always" | "onHoverOnly"

Determines whether pane headers are only shown on hover or always visible. Defaults to 'always'.

unpinBehavior

unpinBehavior: IgrPaneActionBehavior

Determines whether the selected pane or all panes are unpinned when clicking the unpin button of a pane within a dockable TabGroup. Defaults to 'allPanes'.