Blazor Dock Manager Overview

The Infragistics Blazor 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.

Blazor Dock Manager Example

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

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:

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:

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

Navigating

• 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

The 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

API References