HySplitterPanel

Usage examples on this page are written for Lit / plain HTML (<hy-splitter-panel>). The same component ships as HySplitterPanel in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A content panel within an hy-splitter group. Wraps content and provides size constraints for the parent splitter's resize logic. Supports collapsible behavior.

This component is not designed to be used standalone - it must be a direct child of hy-splitter.

Examples

Basic panel

<hy-splitter-panel default-size="50">
  <p>Panel content</p>
</hy-splitter-panel>

With constraints

<hy-splitter-panel default-size="25" min-size="15" max-size="40">
  <nav>Sidebar</nav>
</hy-splitter-panel>

Collapsible

<hy-splitter-panel default-size="25" min-size="15" collapsible collapsed-size="0">
  <nav>Sidebar</nav>
</hy-splitter-panel>

API

Properties

Property	Attribute	Type	Default	Description
currentSize	—	number	0	Current computed size (managed by parent splitter)
defaultSize	default-size	number	0	Initial size as a percentage (0-100). If omitted, remaining space is distributed equally.
minSize	min-size	number	0	Minimum allowed size as a percentage (0-100).
maxSize	max-size	number	100	Maximum allowed size as a percentage (0-100).
collapsible	collapsible	boolean	false	Whether this panel can be collapsed below its min-size.
collapsedSize	collapsed-size	number	0	Size when collapsed, as a percentage (0-100).
collapsed	collapsed	boolean	false	Whether the panel is currently collapsed.

Events

Event	Detail	Description
collapse	—	Fired when collapse state changes. Detail: { collapsed: boolean }

Slots

Slot	Description
default	Panel content

CSS Parts

Part	Description
panel	The panel wrapper element

Methods

collapse()

Collapses the panel to its collapsed-size.

expand()

Expands the panel to its previous size (before collapse).

getSize()

Gets the current computed size of the panel.

resize()

Sets the panel size programmatically.