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. When only a single child is visible (due to conditional rendering with when attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container.

Most properties of the component focus on the primary section (e.g. sizing).

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Component Label	`label`, `labelPosition`, `labelWidth`, `labelBreak`, `required`, `enabled`, `shrinkToLabel`, `style`, `readOnly`
Publish/Subscribe	`subscribeToTopic`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Styling Variant	`variant`

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. Negative values are supported and calculate from the end of the container (e.g., "-20%" means "80% of container", "-100px" means "container size - 100px").

<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>

<App>
  <Splitter height="200px" maxPrimarySize="-50px">
    <Stack backgroundColor="lightblue" height="100%" />
    <Stack backgroundColor="darksalmon" height="100%" />
  </Splitter>
</App>

Example: maxPrimarySize with negative value (from end)

<App>
  <Splitter height="200px" maxPrimarySize="-50px">
    <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.

Signature: resize(primarySize: number): void

primarySize: The new size of the primary panel in pixels.

<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.

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

primaryPanel: The primary section/panel of the Splitter component.
secondaryPanel: The secondary section/panel of the Splitter component.

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