Reference
Splitter
Splitter, dressed in the paper-and-ink system: panels divide on a hairline and a small paper-seal thumb answers the hand. The parts — Root, Panel, ResizeTrigger, ResizeTriggerIndicator.
Root · Panel · ResizeTrigger · ResizeTriggerIndicator
#Panel
| Prop | Type | Default | Description |
|---|---|---|---|
id | PanelId | — |
#ResizeTriggerIndicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#ResizeTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | — | |
id | ResizeTriggerId | — |
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
defaultSize | number[] | The initial size of the panels when rendered. Use when you don't need to control the size of the panels. | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; resizeTrigger(id: string): string; label(id: string): string; panel(id: string | number): string; }> | The ids of the elements in the splitter. Useful for composition. | |
keyboardResizeBy | number | The number of pixels to resize the panel by when the keyboard is used. | |
nonce | string | The nonce for the injected splitter cursor stylesheet. | |
orientation | 'horizontal' | 'vertical' | "horizontal" | The orientation of the splitter. Can be horizontal or vertical |
panels | splitter.PanelData[] | The size constraints of the panels. | |
registry | splitter.SplitterRegistry | The splitter registry to use for multi-drag support. | |
size | number[] | The controlled size data of the panels |
| Event | Payload |
|---|---|
resize | details: ResizeDetails |
update:size | size: number[] |
expand | details: ExpandCollapseDetails |
collapse | details: ExpandCollapseDetails |
resizeEnd | details: ResizeEndDetails |
resizeStart | — |