Split
Two resizable panes side by side or stacked; nested components pick a pane through layout.slot (first, second).
Two resizable panes side by side or stacked; nested components pick a pane through layout.slot (first, second).
Add it to an app
- Open the app builder and find Split in the component palette.
- Insert it into the intended region or container.
- Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
- Connect its events where the app should respond to a user gesture.
- Preview with representative data and save after resolving validation problems.
The type name in the builder’s code view is split.
Settings
| Setting | Accepted value | Required | Default | What it controls |
|---|---|---|---|---|
Height (CSS length; blank = auto, 24rem when vertical) (height) | string | No | "" | Literal only; do not use an expression binding. One length with a unit (px, rem, em, vh, %). Stacked panes need a definite height for their shares. |
Minimum share of the first pane (0-0.5) (minFirst) | number; minimum 0; maximum 0.5 | No | 0.2 | Literal only; do not use an expression binding. |
Minimum share of the second pane (0-0.5) (minSecond) | number; minimum 0; maximum 0.5 | No | 0.2 | Literal only; do not use an expression binding. |
Orientation (horizontal = side by side | vertical = stacked) (orientation) | "horizontal" / "vertical" | No | "horizontal" | Literal only; do not use an expression binding. |
First pane's opening share (strictly between 0 and 1) (ratio) | number; minimum 0; maximum 1 | No | 0.5 | Literal only; do not use an expression binding. Clamped into the band the two minimum shares define; the reset gesture returns here. The ends are not shares: 0 or 1 (an empty pane), like any unusable value, opens at the even split. |
Values available to bindings
This component declares no published values. Use its settings and any events to configure its behaviour.
Keyboard and accessible labels
Accessible label source: The splitter announces "Resize panes" with the first pane's share as its value.
-
Arrow keys along the split axis move the splitter 2% (10% with Shift)
-
Home / End snap to the minimum shares
-
Enter resets to the authored ratio; Shift+Enter is the even split
-
Drag with a pointer; double-click resets
Example: A 40/60 side-by-side split
| Setting | Example value |
|---|---|
minFirst | 0.25 |
minSecond | 0.25 |
orientation | "horizontal" |
ratio | 0.4 |
If it is empty or unavailable
Check the source binding, the selected item, and the app’s access. A hosted document, table, review, or storage component needs the corresponding app capability; an offline preview cannot supply live private data. A source running with no results is different from an invalid binding. Inspect the app’s workflow and data source before changing the presentation.