Splitter
Layout
A handle that sets the size of a region beside it: dragged, between min: and max:; double-clicked or Enter, back to reset:; the arrow keys move it.
Splitter(bind: …, min: …, max: …)
Example
state side = 240
Row {
Container { style { width: {side}px } Text("Files") }
Splitter(bind: side, min: 160, max: 480, reset: 240, label: "Sidebar width")
Container { Text("Editor") }
}
Renders with the class wf-splitter, stable across releases, so a stylesheet may target it.
| Prop | Type | Meaning |
|---|---|---|
| bind: | State |
State variable the control reads and writes (two-way) |
| min: | Number |
The smallest size, in px |
| max: | Number |
The largest size, in px |
| reset: | Number |
The size a double-click goes back to |
| label: | String |
What it resizes, for a screen reader |
| horizontal: | Bool |
Between two regions one above the other: it moves up and down |
| reverse: | Bool |
On the start side of what it sizes — a pane on the right, a panel below — so a drag toward the start grows it |
Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.