@hpcc-js/Visualization

Dock Panel

tag: <hpcc-dockpanel>

TIP

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

Child Element data-??? attributes

data-label

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.

data-mode

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

data-ref

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.

data-closable

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

Type: boolean

Default Value: false

data-caption

The tooltip text for the tabbed item

Type: string

Default Value: "

Events

child-added

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

child-hidden

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

child-removed

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

child-shown

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

closeRequest

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.
  • evt.target references the dockpanel element.

fit-request

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.

layout-modified

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

update-request

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

Credits

Lumino

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.