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 vertically (from top to bottom).

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, each splitter panel will be arranged horizontally instead of vertically.
bar-color	string	false	neutral-200	If set,it overrides the splitter bar color.
bar-hover-color	string	false	primary-500	If set,it overrides the splitter bar color when hovering the bar.
bar-corner-radius	string (x or x0 x1 x2 x3)	false	none	Defines the radius of the splitter corners. It can be set once for all corners at once (x) or each corners can be set by separating values with space (x0 x1 x2 x3) to assign respectively top-left, top-right, bottom-right and bottom-left radiuses. Values can be none, small, medium, large, or extralarge.

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 horizontally from left to right with a vertical bar which can be use 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.