Split Layout API
Import all three standalone building blocks from @tailng-ui/components.
tng-split-group
| Input | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Chooses left/right or top/bottom layout. |
disabled | boolean | false | Preserves sizes while disabling every handle. |
step | number | 10 | Default arrow-key increment in pixels. |
largeStep | number | 50 | Default Shift+Arrow increment. |
[tngSplitPane]
| Input | Type | Default | Description |
|---|---|---|---|
paneId | string | generated | Stable id used by events and imperative methods. |
size | number | null | null | Controlled pixel size. |
defaultSize | number | null | null | Initial uncontrolled pixel size. |
minSize, maxSize | number | 0, unbounded | Expanded size constraints. |
grow | number | 0 | Weight used to receive remaining container space. |
collapsible | boolean | false | Allows keyboard, pointer, or API collapse. |
collapsed | boolean | undefined | undefined | Optional controlled collapse state. |
defaultCollapsed | boolean | false | Initial uncontrolled collapse state. |
collapsedSize | number | 0 | Collapsed pixels; use a nonzero value for an icon rail. |
disabled | boolean | false | Prevents adjacent handles from resizing this pane. |
sizeChange and collapsedChange emit controlled-state requests.
tng-split-handle
ariaLabel names the separator. Optional step and largeStep override the group, while primaryPane selects 'previous', 'next', or automatic collapse behavior.
Events and methods
resizeStart, frame-coalesced resize, and resizeEnd emit TngSplitResizeEvent with adjacent ids, final pixel sizes, and pointer, keyboard, or api source.
The exported group instance provides recalculate(), setPaneSize(id, pixels), setPaneCollapsed(id, state), and togglePane(id). Persistence remains application-owned.