Splitter

The Splitter component divides a container (such as a window, panel, pane, etc.) into two resizable sections.

These sections 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).

See also: `HSplitter`, `VSplitter`.

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>

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>

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>

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>

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>

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>

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>

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>

Exposed Methods

This component does not expose any methods.

Styling

The Splitter component provides these theme variables:

• border-Splitter
• backgroundColor-Splitter
• backgroundColor-resizer-Splitter
• borderColor-Splitter
• cursor-resizer-horizontal-Splitter
• cursor-resizer-vertical-Splitter
• padding-Splitter
• borderRadius-Splitter
• boxShadow-Splitter
• borderStyle-Splitter
• borderWidth-Splitter
• thickness-resizer-Splitter

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "cursor-resizer-horizontal-Splitter": "grab",
    "cursor-resizer-vertical-Splitter": "grab",
    "thickness-resizer-Splitter": "4px",
    "backgroundColor-resizer-Splitter": "#2319e0"
  }
}

Theme Variables