Table of Contents

Splitter

A splitter is a component which arranges splitter panels and allow to resize them with a bar between each panel.

By default, it aligns panels side by side (from left to right) with a vertical bar between them. Set horizontal to true to stack them from top to bottom with a horizontal bar instead.

Use size-model on the relevant splitter panel for two-way size binding when the resized value must be persisted.

Node name : splitter

Attributes

Attribute Type Required Default value Description
horizontal bool false false If true, the panels are stacked from top to bottom with a horizontal bar, instead of side by side with a vertical bar.
bar-style string false line Rendering of the bar between panels. line draws a bar along the whole panel edge. handle keeps the space between panels transparent and draws a rounded handle at its center.
bar-color string false neutral-200 If set, it overrides the color of the bar, or of the handle when bar-style is handle.
bar-hover-color string false primary-500 If set, it overrides the color of the bar, or of the handle when bar-style is handle, while hovering or dragging it.
bar-corner-radius string (1 to 4 values) false none (line), full (handle) Defines the radius of the bar corners, or of the handle corners when bar-style is handle, with 1 to 4 values in the same order as style:corner-radius. Values can be none, extrasmall, small, medium, large, extralarge or full.
handle-length int false 32 Length of the handle along the bar, in pixels. Only applies when bar-style is handle.
handle-thickness int false 4 Thickness of the handle across the bar, in pixels. Only applies when bar-style is handle.

Bar styles

Rendering of a splitter with two panels side by side, for each value of bar-style:

A
B
line
A
B
handle
A
B
handle, hovered or dragged

With the handle style, the content of each splitter panel keeps a 0.375rem space on the side of the handle, so that the handle is separated from both panels. This whole space around the handle can be dragged to resize the panels. A layout:padding set on a splitter panel is added to this space.

A handle-length or handle-thickness attribute on a splitter whose bar-style is line (or not set) has no effect, and the generation reports a warning.

Resizing

The panels are resized in three ways:

  • Drag: a line bar is grabbed on the bar itself, so that it does not overlap the scrollbar of a neighbor panel. A handle bar is grabbed in the whole space around the handle.
  • Double click: the splitter panel after the bar takes all the space its max-size allows, and the other panels take their min-size.
  • Keyboard: each bar can be reached with Tab, and takes the bar-hover-color color when focused. The arrow keys move it by 10% of the splitter, Home and End move it as far as the sizes of the panels allow, and F6 moves the focus to the next bar of the same splitter.

Screen readers announce each bar as a separator labelled "Resize panels", with its orientation and the size of the panel before it.

Examples

  <splitter horizontal="true">
    <splitter-panel>
      <!-- CONTENT 1 -->
    </splitter-panel>
    <splitter-panel>
      <!-- CONTENT 2 -->
    </splitter-panel>
  </splitter>

In this example CONTENT 1 and CONTENT 2 will be rendered from top to bottom with a horizontal bar which can be used to resize the elements.

  <splitter bar-corner-radius="medium">
    <!-- splitter panel definitions -->
  </splitter>

In this example, the bar between splitter panels will have all its corners rendered with a medium radius.

  <splitter bar-corner-radius="none small medium none">
    <!-- splitter panel definitions -->
  </splitter>

In this example, the bar between splitter panels will have its top-right corner radius set to small and its bottom-right corner radius set to medium. The other corners will have right angle corners.

  <splitter bar-style="handle">
    <!-- splitter panel definitions -->
  </splitter>

In this example, the space between splitter panels stays transparent and a rounded handle of 32 by 4 pixels is drawn at its center, with the bar-color color, then the bar-hover-color color while it is hovered or dragged.

  <splitter bar-style="handle" handle-length="48" handle-thickness="6" bar-corner-radius="small">
    <!-- splitter panel definitions -->
  </splitter>

In this example, the handle is 48 pixels long and 6 pixels thick, with small rounded corners instead of fully rounded ends.