@kit-ng-ui/splitter

Resizable horizontal or vertical panes with drag handles. Mirrors ant-design's <Splitter>.

Install

pnpm add @kit-ng-ui/splitter

@use '@kit-ng-ui/splitter/styles';

Example

<kit-splitter direction="horizontal" style="height: 300px;">
  <kit-splitter-panel [defaultSize]="220" [min]="120">Sidebar</kit-splitter-panel>
  <kit-splitter-panel>Main</kit-splitter-panel>
</kit-splitter>

API

<kit-splitter>

| Input | Type | Default | Description | | ------------ | ----------------------------- | -------------- | -------------------------- | | direction | 'horizontal' \| 'vertical' | 'horizontal' | Split orientation. |

| Output | Payload | Description | | ------------ | ------------------- | ------------------------------------ | | resizeEnd | readonly number[] | Pixel size of each pane after drag. |

<kit-splitter-panel>

| Input | Type | Default | Description | | --------------- | --------------------- | ----------- | -------------------------------------------- | | defaultSize | number \| undefined | undefined | Initial pixel size; flexes when unset. | | min | number | 0 | Minimum pixel size during drag. | | max | number \| undefined | undefined | Maximum pixel size during drag. | | keyboardStep | number | 10 | Pixels moved per Arrow press (3× with Shift). |

Notes

• The parent must have a definite size in the split axis (set height on the container for horizontal, width for vertical).
• After a drag, all panels are pinned in pixels; reset by reloading or by programmatically clearing each panel's sizePx.
• The handle is keyboard-operable: focus a handle and press ArrowLeft / ArrowRight (horizontal) or ArrowUp / ArrowDown (vertical) to nudge by keyboardStep px, or hold Shift for a larger step.