React Dock Manager Overview

    The Infragistics React Dock Manager provides a 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.

    React Dock Manager Example

    This example shows most functionalities and docking options of the IgrDockManager that you can use in your application.

    To install the Dock Manager package execute the following command:

    npm install --save igniteui-dockmanager

    Then it is necessary to import and call the defineCustomElements() function:

    import { defineCustomElements } from 'igniteui-dockmanager/loader';

defineCustomElements();

    Here is how to add an event listener for the PaneClose event:

    this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));

    Customization

    The Dock Manager component provides the option to customize all buttons using slots and parts. To change any of the buttons you simply have to define your own element inside the Dock Manager and set the slot attribute to the corresponding identifier.

    Let's utilize these slots and parts to create a customized Dock Manager layout. First, we will provide our own icons, using the closeButton, maximizeButton, minimizeButton, pinButton and unpinButton slots:

    Then, we will use the exposed parts in our stylesheet. This way we have full control of the component's styling:

    igc-dockmanager::part(unpinned-tab-area) {
    background: #bee9ec;
}

igc-dockmanager::part(unpinned-tab-area--left) {
    border-right: 1px dashed #004d7a;
}

igc-dockmanager::part(unpinned-tab-area--bottom) {
    border-top: 1px dashed #004d7a;
}

igc-dockmanager::part(tab-header-close-button),
igc-dockmanager::part(pane-header-close-button) {
    background-color: #e73c7e;
}

igc-dockmanager::part(pane-header-pin-button),
igc-dockmanager::part(pane-header-unpin-button) {
  background: rgb(218, 218, 218);
  border: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

igc-dockmanager::part(tabs-maximize-button),
igc-dockmanager::part(tabs-minimize-button),
igc-dockmanager::part(pane-header-minimize-button),
igc-dockmanager::part(pane-header-maximize-button) {
  width: 24px;
  height: 24px;
  border: none;
  transition: opacity 250ms ease-in-out;
  opacity: 0.3;
  margin-right: 15px;
  margin-top: -5px;
  margin-left: 0px;
}

    If everything went well, we should now have a DockManager with customized icons and tab area. Let's have a look at it:

    Below you can find a list containing the slot names for all of the buttons as well as the splitter handle:

    Slot name Description
    closeButton The close buttons.
    paneHeaderCloseButton The close buttons of the pane headers.
    tabHeaderCloseButton The close buttons of the tab headers.
    moreTabsButton The more tabs buttons.
    moreOptionsButton The more options buttons.
    maximizeButton The maximize buttons.
    minimizeButton The minimize buttons.
    pinButton The pin buttons.
    unpinButton The unpin buttons.
    splitterHandle The splitter handle.

    You can find each slot's corresponding part in the CSS Parts under Styling section of this page.

    CSS Variables

    The following table describes all CSS variables used for styling the dock-manager component:

    CSS variable Description
    --igc-background-color The background color of the header inside the pane navigator component.
    --igc-accent-color The background color of the buttons inside the pane header actions part on focus.
    --igc-active-color The text and box-shadow color used for the components in active state.
    --igc-border-color The border bottom color of the pane header component.
    --igc-font-family The font-family of the dock-manager component.
    --igc-dock-background The background color of the dock-manager, tab and floating-pane components.
    --igc-dock-text The text color of the dock-manager and the floating pane components.
    --igc-pane-header-background The background color of the pane header component.
    --igc-pane-header-text The text color of the pane header component.
    --igc-pane-content-background The background color of the content inside the dock-manager and the tab panel components.
    --igc-pane-content-text The text color of the content inside the dock-manager and the tab panel components.
    --igc-tab-text The text color of the tab header component.
    --igc-tab-background The background color of the tab header component.
    --igc-tab-border-color The border color of the tab header component.
    --igc-tab-text-active The text color of the selected tab header component.
    --igc-tab-background-active The background color of the selected tab header component.
    --igc-tab-border-color-active The border color of the selected tab header component.
    --igc-pinned-header-background The background color of the unpinned pane header component.
    --igc-pinned-header-text The text color of the unpinned pane header component.
    --igc-splitter-background The background color of the splitter component.
    --igc-splitter-handle The background color of the splitter handle.
    --igc-button-text The color of the buttons inside the pane header actions part.
    --igc-flyout-shadow-color The box-shadow color of the content pane component.
    --igc-joystick-background The background color of the joystick and the root docking indicator components.
    --igc-joystick-border-color The border color of the joystick and the root docking indicator components.
    --igc-joystick-icon-color The icon color of the joystick and the root docking indicator components.
    --igc-joystick-background-active The hover background color of the joystick and the root docking indicator components.
    --igc-joystick-icon-color-active The hover icon color of the joystick and the root docking indicator components.
    --igc-floating-pane-border-color The border color of the floating panes.
    --igc-context-menu-background The background color of the context menu items.
    --igc-context-menu-background-active The background color of the context menu items on hover and focus.
    --igc-context-menu-color The text color of the context menu items.
    --igc-context-menu-color-active The text color of the context menu items on hover and focus.
    --igc-drop-shadow-background The background color of the drop shadow.
    --igc-disabled-color The text color of the components in disabled state.

    Keyboard Navigation

    Keyboard navigation enhances the accessibility of the Dock Manager and provides a rich variety of interactions to the end-user like navigating through all panes, splitting the view in multiple directions through docking the active pane, etc.

    The shortcuts are as follows:

    Docking

    • Cmd/Ctrl + Shift + ↑ Docks to global top
    • Cmd/Ctrl + Shift + ↓ Docks to global bottom
    • Cmd/Ctrl + Shift + → Docks to global right
    • Cmd/Ctrl + Shift + ← Docks to global left
    • Shift + ↑ With multiple tabs in a tab group splits the view and docks the focused tab above
    • Shift + ↓ With multiple tabs in a tab group splits the view and docks the focused tab below
    • Shift + → With multiple tabs in a tab group splits the view and docks the focused tab right
    • Shift + ← With multiple tabs in a tab group splits the view and docks the focused tab left
    • Cmd/Ctrl + F6 or Cmd/Ctrl + → Focuses next tab in document host
    • Cmd/Ctrl + Shift + F6 or Cmd/Ctrl + ← Focuses previous tab in document host
    • Alt + F6 Focuses next content pane
    • Alt + Shift + F6 Focuses previous content pane

    Pane Navigator

    Тhe following keyboard shortcuts show a navigator from which you can iterate through panes and documents.

    • Cmd/Ctrl + F7 or Cmd/Ctrl + F8 Starts from the first document forward
    • Alt + F7 or Alt + F8 Starts from the first pane forward
    • Cmd/Ctrl + Shift + F7 or Cmd/Ctrl + Shift + F8 Starts from the last document backwards
    • Alt + Shift + F7 or Alt + Shift + F8 Starts from the last pane backwards

    Other

    • Alt + F3 Closes the active pane

    Practice all of the above mentioned actions in the sample demo.

    Styling

    The Dock Manager uses a shadow DOM to encapsulate his styles and behaviors. As a result, you can't simply target its internal elements with the usual CSS selectors. That is why we expose components parts that can be targeted with the ::part CSS selector.

    igc-dockmanager::part(content-pane) {
  border-radius: 10px;
}

    In the following example, we demonstrate the ability of customizing the Dock Manager through some of the CSS parts that we've exposed.

    CSS Parts

    Part name Description
    content-pane The content pane component.
    pane-header The content pane header component.
    pane-header-content The content area of the content pane header.
    pane-header-actions The actions area of the content pane header.
    active Indicates an active state. Applies to pane-header, pane-header-content, pane-header-actions, tab-header.
    floating Indicates a floating pane placement. Applies to pane-header, pane-header-content, pane-header-actions.
    window Indicates a floating window placement. Applies to pane-header, pane-header-content, pane-header-actions.
    split-pane The split pane component.
    splitter The resizing splitter component.
    splitter-base The base element of the splitter component.
    splitter-ghost The ghost element of the splitter component.
    unpinned-pane-header The unpinned pane header component.
    tab-header The tab header component.
    tab-header-more-options-button The more options button in the tab header.
    tab-header-close-button The close button in the tab header.
    selected Indicates a selected state. Applies to tab-header and tab-header-close-button.
    hovered Indicates a hovered state. Applies to tab-header-close-button.
    header-title The text title of the tab header.
    tab-strip-area The tab strip area containing the tab headers.
    tab-strip-actions The tab strip area containing the tab actions.
    top Indicates a top tabs position. Applies to tab-header, tab-strip-area, tab-strip-actions.
    bottom Indicates a bottom tabs position. Applies to tab-header, tab-strip-area, tab-strip-actions.
    context-menu The context menu component.
    context-menu-item An item in the context menu component.
    docking-preview The docking preview area.
    docking-indicator The non-root docking indicator.
    root-docking-indicator The root docking indicator.
    splitter-docking-indicator The splitter docking indicator.
    pane-navigator The pane navigator component.
    pane-navigator-header The header area of the pane navigator.
    pane-navigator-body The body area of the pane navigator.
    pane-navigator-items-group An items group in the pane navigator component.
    pane-navigator-items-group-title The title element of an items group in the pane navigator.
    pane-navigator-item An item in the pane navigator.
    pane-header-close-button The close button in the pane header.
    pane-header-maximize-button The maximize button in the pane header.
    pane-header-minimize-button The minimize button in the pane header.
    pane-header-pin-button The pin button in the pane header.
    pane-header-unpin-button The unpin button in the pane header.
    tabs-maximize-button The tabs maximize button.
    tabs-minimize-button The tabs minimize button.
    tabs-more-button The more tabs button.
    context-menu-unpin-button The unpin button in the context menu.
    context-menu-close-button The close button in the context menu.
    splitter-handle The splitter handle.
    horizontal Indicates a horizontal position. Applies to splitter-handle.
    vertical Indicates a vertical position. Applies to splitter-handle.

    API References