Splitter — Playground
orientation
State
<kui-splitter (sizesChange)="onResize($event)">
<kui-splitter-pane>Pane 1</kui-splitter-pane>
<kui-splitter-pane>Pane 2</kui-splitter-pane>
</kui-splitter>Splitter events
- No events yet.
| Name | Type | Default | Description |
|---|---|---|---|
| kui-splitter orientation | 'horizontal' | 'vertical' | undefined | undefined | Pane layout direction (defaults.splitter.orientation, then horizontal). Horizontal puts the panes side by side with a vertical gutter line. |
| kui-splitter disabled | boolean | false | Disables every gutter: aria-disabled, tabindex -1, and no drag or keyboard resize. Pane content stays interactive. |
| (sizesChange) | readonly number[] | - | Emitted with the full sizes array, in percent, on every drag or keyboard resize. |
| kui-splitter-pane size | number | undefined | undefined | Initial or requested share in percent. The splitter owns the live size afterwards. Panes without a size split the remaining space evenly. |
| kui-splitter-pane minSize | number | undefined | undefined | Minimum share in percent, clamped to 0-100 (defaults.splitter.minSize, then 10). Drag and keyboard resizing clamp to it; invalid static values use 10. |
| kui-splitter-pane collapsible | boolean | false | Adds a one-touch collapse button to the adjacent gutter. Only meaningful on the first or last pane; the flag of a middle pane is ignored. |
| currentSize | Signal<number> | - | Live share of a pane in percent, reflecting drag and keyboard changes. |
| collapsed | Signal<boolean> | - | True while the pane is collapsed to its minSize. |
| toggleCollapse() | () => void | - | Toggles the collapse state. A no-op when collapsible is false or the pane is in the middle. |
| --kui-splitter-pane-bg / -pane-border / -radius | CSS custom properties | - | Container background, border and corner radius. |
| --kui-splitter-gutter-size | CSS custom property | --kui-space-2 | Width or height of the interactive gutter strip. |
| --kui-splitter-gutter-line / -line-hover / -line-active / -line-disabled | CSS custom properties | - | Gutter line colour by state. |
| --kui-splitter-thumb-bg / -thumb-bg-hover / -thumb-bg-active | CSS custom properties | - | Default grip colour by state. |
| --kui-splitter-collapse-btn-bg / -collapse-btn-fg / -focus-ring | CSS custom properties | - | One-touch collapse button colours and the focus-visible ring of a gutter. |
| KuiSplitterOptions | interface | - | Shape of defaults.splitter: orientation and minSize. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.