Splitter API · Needless UI

Import

import-splitter.ts

import { NuiSplitter, NuiSplitterHandle, NuiSplitterPane } from '@needless-ui/angular/splitter';

Panes with handles between them.

NuiSplitter: Properties
Name	Type	Default	Description
`orientation`Input	`'horizontal' \| 'vertical'`	`'horizontal'`	Side by side, or stacked.
`sizes`Two-way	`number[]`	`shared evenly`	Each pane’s share, in percent, in order.
`storageKey`Input	`string`		Keeps the sizes in `localStorage` under this key.
`step`Input	`number`	`5`	How far the arrow keys move a handle, in percent. Twice as far with Shift.
`move`Method	`(index: number, delta: number) => void`		Moves the boundary after a pane by a percentage.

A pane. Its sizes take pixels, rems or percent.

NuiSplitterPane: Properties
Name	Type	Default	Description
`defaultSize`Input	`string \| number (e.g. '240px', '30%')`		Its size at first, when there are no sizes to restore.
`min`Input	`string \| number`	`0`	Its smallest size.
`max`Input	`string \| number`	`'100%'`	Its largest size.
`collapsible`Input	`boolean`	`false`	It folds away: dragged below half its minimum, or with Enter.
`collapsedSize`Input	`string \| number`	`0`	Its size folded, such as a rail of icons.
`label`Input	`string`		Names the handle that resizes it.

The handle between two panes.

NuiSplitterHandle: Properties
Name	Type	Default	Description
`label`Input	`string`	`the pane's label`	Names it, when the pane’s label doesn’t.
`disabled`Input	`boolean`	`false`	It doesn’t move.
`toggle`Method	`() => void`		Folds the pane beside it, or brings it back.