Splitter
Splitter component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.Most properties of the component focus on the primary section (e.g. sizing).
Properties
floating (default: false)
Toggles whether the resizer is visible (
false) or not (true) when not hovered or dragged. The default value is false, meaning the resizer is visible all the time.<App>
<Splitter height="200px" floating="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: floating
<App>
<Splitter height="200px" floating="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>initialPrimarySize (default: "50%")
This optional number property sets the initial size of the primary section. The unit of the size value is in pixels or percentages.
<App>
<Splitter height="200px" initialPrimarySize="40%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: initialPrimarySize
<App>
<Splitter height="200px" initialPrimarySize="40%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>maxPrimarySize (default: "100%")
This property sets the maximum size the primary section can have. The unit of the size value is in pixels or percentages.
<App>
<Splitter height="200px" maxPrimarySize="80%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: maxPrimarySize
<App>
<Splitter height="200px" maxPrimarySize="80%">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>minPrimarySize (default: "0%")
This property sets the minimum size the primary section can have. The unit of the size value is in pixels or percentages.
<App>
<Splitter height="200px" minPrimarySize="40px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: minPrimarySize
<App>
<Splitter height="200px" minPrimarySize="40px">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>orientation (default: "vertical")
Sets whether the
Splitter divides the container horizontally and lays out the section on top of each other (vertical), or vertically by placing the sections next to each other (horizontal).Available values:
horizontal, vertical (default)<App>
<Splitter height="200px" orientation="horizontal">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: orientation
<App>
<Splitter height="200px" orientation="horizontal">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>splitterTemplate
The divider can be customized using XMLUI components via this property.
<App>
<Splitter height="200px">
<property name="splitterTemplate">
<ContentSeparator backgroundColor="green" height="4px" />
</property>
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: splitterTemplate
<App>
<Splitter height="200px">
<property name="splitterTemplate">
<ContentSeparator backgroundColor="green" height="4px" />
</property>
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>swapped (default: false)
This optional booelan property indicates whether the
Splitter sections are layed out as primary and secondary (false) or secondary and primary (true) from left to right.<App>
<Splitter height="200px" swapped="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: swapped
<App>
<Splitter height="200px" swapped="true">
<Stack backgroundColor="lightblue" height="100%" />
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Events
resize
This event fires when the component is resized.
<App height="200px" var.counter="{0}">
<Splitter onResize="counter++">
<Stack backgroundColor="lightblue" height="100%">
<Text value="Resize event called {counter} number of times" />
</Stack>
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Example: resize
<App height="200px" var.counter="{0}">
<Splitter onResize="counter++">
<Stack backgroundColor="lightblue" height="100%">
<Text value="Resize event called {counter} number of times" />
</Stack>
<Stack backgroundColor="darksalmon" height="100%" />
</Splitter>
</App>Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-resizer-Splitter | $color-surface-100 | $color-surface-100 |
| backgroundColor-Splitter | none | none |
| border-Splitter | none | none |
| borderColor-Splitter | none | none |
| borderRadius-Splitter | none | none |
| borderStyle-Splitter | none | none |
| borderWidth-Splitter | none | none |
| boxShadow-Splitter | none | none |
| cursor-resizer-horizontal-Splitter | ew-resize | ew-resize |
| cursor-resizer-vertical-Splitter | ns-resize | ns-resize |
| thickness-resizer-Splitter | 5px | 5px |