SplitPanel
One pane of a SplitPane. It declares its own share and limits; the parent group computes the geometry.
Props
SplitPanel extends HTMLAttributes<HTMLDivElement>. Every size here is a percentage of the enclosing group, never a pixel count, so the layout holds its proportions across viewport sizes.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number | — | Starting share of the group, in percent. Panels that declare none split what is left. |
min | number | 8 | Floor, in percent of the group. |
max | number | 100 | Maximum panel size as a percentage of the group. Adjacent panel minimums can restrict the resulting size. |
collapsible | boolean | — | Lets the panel fold to zero. The neighbouring separator gains a double-click and an Enter/Space toggle. |
scroll | boolean | — | Makes the panel its own scrolling region. |
Examples
Limits
Resizing a separator changes only the two adjacent panels. Movement stops when either panel reaches its configured limit.
Collapsible
Double-click the separator, or focus it and press Enter, to fold the panel away and bring it back.
Scrolling content
scroll adds overflow scrolling to the panel. Use ScrollArea inside the panel for edge fades and its keyboard scrolling behavior.
import { SplitPane, SplitPanel } from "@solarius/onset";
<SplitPane>
<SplitPanel defaultSize={26} min={16} collapsible scroll>
<Navigator />
</SplitPanel>
<SplitPanel scroll>
<Detail />
</SplitPanel>
</SplitPane>;