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.

    API References