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 React Dock Manager.

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

    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 + Arrow up Docks to global top
    • Cmd/Ctrl + Shift + Arrow down Docks to global bottom
    • Cmd/Ctrl + Shift + Arrow right Docks to global right
    • Cmd/Ctrl + Shift + Arrow left Docks to global left
    • Shift + Arrow Up With multiple tabs in a tab group splits the view and docks the focused tab above
    • Shift + Arrow down With multiple tabs in a tab group splits the view and docks the focused tab below
    • Shift + Arrow right With multiple tabs in a tab group splits the view and docks the focused tab right
    • Shift + Arrow left With multiple tabs in a tab group splits the view and docks the focused tab left
    • Cmd/Ctrl + F6 or Cmd/Ctrl + Arrow right Focuses next tab in document host
    • Cmd/Ctrl + Shift + F6 or Cmd/Ctrl + Arrow left 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 Members