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.

Used inside <hy-splitter> — it only means something as part of it.

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.

Accessibility: your part

• Do not leave a control people need only inside a panel that can collapse without collapsible to reopen it.

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. Set it in markup to start collapsed: the parent splitter lays the panel out at its collapsed-size on first render (its neighbor takes the rest) and restores its default size on expand. Pair it with collapsible so the user can reopen it (Enter on the handle, or a drag past min-size).

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.