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 IgcDockManagerComponent 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 + 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
Navigating
- 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.