@hpcc-js/Visualization

Split Panel

tag: <hpcc-splitpanel>

TIP

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

Attributes

orientation

The orientation of the splitter

Type: "horizontal" | "vertical"

  • horizontal: Horizontal orientation

  • vertical: Vertical orientation

Default Value: "horizontal"

spacing

The spacing between the panels in the splitter

Type: number

Default Value: 4

Child Element data-??? attributes

data-border_width

The split panel border width (in pixels)

Type: number

Default Value: 1

data-padding

The split panel padding size(in pixels)

Type: number

Default Value: 3

Events

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.

update-request

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

More Examples

Vertical

tag: <hpcc-splitpanel orientation="vertical">

Horizontal and vertical

tag: <hpcc-splitpanel> and <hpcc-splitpanel orientation="vertical">

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.