Note

This documentation describes the Splitter and SplitterPanel Vue components for native UI views, for Xml templates see splitter and splitter-panel.

Splitter / SplitterPanel

Splitter is a resizable split-pane container. Place SplitterPanel components inside it to create resizable regions.

Import

import { Splitter, SplitterPanel } from '@neos/design-system'

---

Splitter

Props

Prop	Type	Default	Description
horizontal	boolean	false	false = vertical split (side by side); true = horizontal split (top/bottom)
barColor	string	''	CSS variable name (without --) for the gutter bar color
barHoverColor	string	''	CSS variable name for the gutter hover color
barCornerRadius	string	'none'	Space token value for gutter rounded corners

Slots

Slot	Description
default	Should contain SplitterPanel children

---

SplitterPanel

Props

Prop	Type	Default	Description
size	number \| string	undefined	Initial size as a percentage
minSize	number \| string	0	Minimum size as a percentage
maxSize	number \| string	100	Maximum size as a percentage

Slots

Slot	Description
default	Panel content

---

Usage Examples

Vertical split (side by side)

<Splitter>
  <SplitterPanel :size="30" :min-size="20">
    <Sidebar />
  </SplitterPanel>
  <SplitterPanel :size="70">
    <ViewContainer />
  </SplitterPanel>
</Splitter>

Horizontal split (top/bottom)

<Splitter :horizontal="true">
  <SplitterPanel :size="60">
    <Datagrid />
  </SplitterPanel>
  <SplitterPanel :size="40" :min-size="15">
    <DetailPanel />
  </SplitterPanel>
</Splitter>

Constrained panel sizes

<Splitter>
  <SplitterPanel :size="25" :min-size="15" :max-size="40">
    <TreeView :source="tree" caption-property="name" />
  </SplitterPanel>
  <SplitterPanel>
    <slot />
  </SplitterPanel>
</Splitter>