The Infragistics Web Components Dock Manager component provides you with the properties needed to further customize the layout to suit your specific application requirements.
Let's dive in and explore how Web Components DockManager empowers you to create exceptional user interfaces and enhance the productivity of your applications!
Proximity Dock
In this mode the joystick indicators are hidden and docking can be accomplished by dragging a pane close to the border of another pane. While dragging a pane, when the mouse cursor reaches the area corresponding to the dock position, a dock preview is shown. On mouse up the dragged pane is docked in the previewed location. To enable proximity docking, simply set the proximityDock property to true.
this.dockManager.proximityDock = true;
ts
Inner Docking
In order to right dock a dragged pane 1 in pane 2, the cursor should be in the area defined by the right border of pane 2 and the right border offset to left. The offset distance is specified as a proximity dock threshold and is set to a value of 50px. In cases where there is a splitter, docking can be performed from both sides of the splitter.
Outer Docking
To perform outer dock, you must first meet specific criteria. In Dock Manager, outer docking is only allowed within a document host, meaning you will be docking the target pane to the outer regions of the document host.
In order to perform an outer top dock for example, must fall within the region defined by the top border of the document host and stay within the top border offset. The offset distance is specified as a proximity dock outer threshold and is explicitly set to a value of 25px. The proximity dock threshold's value of 50px remains unchanged which essentially means that in this scenario, only a 25px area is available for inner docking. In cases where there is a splitter inside the document host, outer dock can be performed from both sides of the splitter.
NOTE: When proximity dock is enabled, users would not be able to perform an outer dock for both left and right and top and bottom positions from a single pane. For example in a scenario where two split panes are present with a splitter between them, users will be able to perform only an outer left dock when the dragged pane is over the left split pane and vice versa.
<!DOCTYPE html><html><head><title>DockManagerProximityDock</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-dockmanagerid="dockManager"><divslot="content1">Content 1</div><divslot="content2">Content 2</div><divslot="content3">Content 3</div><divslot="content4">Content 4</div><divslot="content5">Content 5</div><divslot="content6">Content 6</div><divslot="content7">Content 7</div><divslot="content8">Content 8</div><divslot="content9">Content 9</div><divslot="content10">Content 10</div></igc-dockmanager></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Focus Panes Programmatically
The focusPane method allows developers to dynamically and programmatically focus a specific pane within the layout by providing the contentId of the desired pane.
this.dockManager.focusPane('content1');
ts
When using the focusPane method, the behavior varies depending on the state of the targeted pane. Here's how it works:
Floating Panes: If the pane is floating, invoking focusPane will bring it into focus, set it as the activePane and ensure it appears on top of any other floating panes.
Unpinned Panes: When the targeted pane is unpinned, focusPane will flyout the pane to its open state.
Regular Pinned Panes: For regular pinned panes, focusPane will set the pane as the activePane.
By utilizing this method, developers can effortlessly control the visibility and positioning of panes based on user interaction or application events.
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Auto-hide Pane Headers
With the showPaneHeaders property of the DockManager, developers now have the flexibility to control the visibility of pane headers within the layout. By default, showPaneHeaders is set to always ensuring that pane headers are always visible. When set to onHoverOnly, all pane headers will be hidden until you hover your mouse over the top edge of a content pane. The corresponding pane header will appear and it will smoothly hide once your mouse moves away. Take a look at the example below:
<!DOCTYPE html><html><head><title>DockManagerHidePaneHeaders</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><igc-dockmanagerid="dockManager"><divslot="content1">Content 1</div><divslot="content2">Content 2</div><divslot="content3">Content 3</div><divslot="content4">Content 4</div><divslot="content5">Content 5</div><divslot="content6">Content 6</div><divslot="content7">Content 7</div><divslot="content8">Content 8</div><divslot="content9">Content 9</div><divslot="content10">Content 10</div></igc-dockmanager></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Control Inner Docking
By default, the Dock Manager allows users to effortlessly drag and dock panes inside each other, creating tabs. To provide more control over this functionality, we've introduced two properties - allowInnerDock and acceptsInnerDock.
By setting the acceptsInnerDock property of an IgcContentPane, developers can control docking inside specific content panes. When this property is set to false, users will be restricted from performing inner docking in the specified pane.
If you wish to disable inner docking throughout the DockManager, simply set allowInnerDock to false. This property determines whether the end user is permitted to inner dock panes at all.
<!DOCTYPE html><html><head><title>DockManagerToggleInnerDock</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><buttonid="innerDock">Toggle Inner Dock</button></div><igc-dockmanagerid="dockManager"><divslot="content1">Content 1</div><divslot="content2">Content 2</div><divslot="content3">Content 3</div><divslot="content4">Content 4</div><divslot="content5">Content 5</div><divslot="content6">Content 6</div><divslot="content7">Content 7</div><divslot="content8">Content 8</div><divslot="content9">Content 9</div><divslot="content10">Content 10</div></igc-dockmanager></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Control Pane Dragging
With the containedInBoundaries property, developers can control whether the sides of floating panes are always contained within the DockManager. When set to true, pane dragging will stop once any of the sides attempt to move beyond the DockManager boundaries.
<!DOCTYPE html><html><head><title>DockManagerContainedInBoundaries</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><buttonid="inBoundariesBtn">Toggle In Boundaries</button></div><igc-dockmanagerid="dockManager"><divslot="content1">Content 1</div><divslot="content2">Content 2</div><divslot="content3">Content 3</div><divslot="content4">Content 4</div><divslot="content5">Content 5</div><divslot="content6">Content 6</div><divslot="content7">Content 7</div><divslot="content8">Content 8</div><divslot="content9">Content 9</div><divslot="content10">Content 10</div></igc-dockmanager></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Split Panes Fixed Size Mode
By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 400 and the second one - to 200, the first will be twice the size of the second one and these two panes would fill up all the available space.
If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the useFixedSize of the parent split pane. When this property is set to true all children are sized in pixels, based on their size property. With that modification, the first pane will span across 400 pixels and the second one - 200 pixels. Further resizing via the splitter would change only the size of the current content pane without affecting the sizes of its siblings. Once the sum of the child panes' sizes exceeds their parent's size, a scrollbar will appear making the parent split pane scrollable.
const splitPaneRelativeSize: IgcSplitPane = {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
panes: [
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content1',
header: 'Pane 1',
size: 400// Size will be relative to siblings
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content2',
header: 'Pane 2',
size: 200// Size will be relative to siblings
}
]
}
const splitPaneFixedSize: IgcSplitPane = {
type: IgcDockManagerPaneType.splitPane,
orientation: IgcSplitPaneOrientation.horizontal,
useFixedSize: true,
panes: [
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content3',
header: 'Pane 3',
size: 400// Size will be applied in pixels
},
{
type: IgcDockManagerPaneType.contentPane,
contentId: 'content4',
header: 'Pane 4',
size: 200// Size will be applied in pixels
}
]
}
ts
Please note that when you dock a pane inside a split pane that has useFixedSize set to true the docked pane will then have the same width/height (depending on the split pane orientation) as the floating pane.