Dock Panel

tag: <hpcc-dockpanel>


See Getting Started for details on how to include @hpcc-js/web-components in your application

Child Element data-??? attributes


The tabbed panel will display this text as the tab label

Type: string

Default Value: Will first revert to the id of the child element and then the element tag if no id.


How the child element will be displayed in the tabbed panel

Type: split-top | split-left | split-right | split-bottom | tab-before | tab-after

  • split-top: The child element will be displayed above the data-ref element.
  • split-left: The child element will be displayed to the left of the data-ref element.
  • split-right: The child element will be displayed to the right of the data-ref element.
  • split-bottom: The child element will be displayed below the data-ref element.
  • tab-before: The child element will be inserted as a tab before the data-ref element.
  • tab-after: The child element will be appended as a tab after the data-ref element.

Default Value: tab-after


The reference element id used when appending child items (optional)

Type: string

Default Value: When omitted the previous child element will be used as the reference.


Allow a tabbed item to be closed by clicking on the displayed "close" button

Type: boolean

Default Value: false


The tooltip text for the tabbed item

Type: string

Default Value: "



Emitted when a child has been added to the dock panel.


Emitted when a child has been hidden in the dock panel.


Emitted when a child has been removed from the dock panel.


Emitted when a child has been shown in the dock panel.


Emitted whenever the user tries to close a tab. Calling evt.preventDefault() will prevent the tab from closing

  • evt.detail references the HTML Element that will be closed.
  • references the dockpanel element.


Emitted when a child component should recalculate its size constraints to fit the space requirements of its child widgets, and to update their position and size. Typically when a child elements visibility state changes.


Emitted whenever the layout of the dockpanel changes. Good time to serialize the layout for undo/redo capabilities.


Emitted whenever the split panel contents should be updated, typically when split pane has been resized.



Lumino is a set of JavaScript packages, written in TypeScript, that provide a rich toolkit of widgets, layouts, events, and data structures. These enable developers to construct extensible high-performance desktop-like web applications, such as JupyterLab. Lumino was formerly known as PhosphorJS.