Splitter

Usage

<SSplitter>
  <SSplitterPanel :default-size="30" :min-size="20">Panel one</SSplitterPanel>
  <SSplitterResizeHandle />
  <SSplitterPanel :min-size="20">Panel two</SSplitterPanel>
</SSplitter>

Three components used together - SSplitter (the group), one SSplitterPanel per pane, and an SSplitterResizeHandle between each pair of panels you want draggable. Sizes are percentages of the group's total by default (sizeUnit="%" on SSplitterPanel); pass sizeUnit="px" for pixel-based panels instead. A pixel defaultSize also applies in the server-rendered layout, before the group measures its container. DashboardSidebar uses this to keep its default width at 260px while the main panel fills the remaining space.

SSplitterPanel has no visual styling of its own beyond clipping its own overflow - what a panel looks like depends entirely on what it's used for, left to the consumer.

Collapsible panels

A panel with collapsible snaps fully closed once dragged past its own minSize, down to collapsedSize (0 by default - fully hidden). Call .collapse()/.expand() on a template ref to do the same thing programmatically - see DashboardSidebar's own source for a real example, driven by a button elsewhere on the page rather than a drag gesture.

SSplitterPanel's own default slot is scoped with { isCollapsed, isExpanded, collapse, expand } - the same collapse()/expand() functions as the template-ref methods above, plus live isCollapsed/isExpanded booleans, so content inside the panel can react to (or trigger) collapse state without needing a ref at all:

<SSplitterPanel collapsible :collapsed-size="0">
  <template #default="{ isCollapsed, expand }">
    <button v-if="isCollapsed" @click="expand()">Expand</button>
    <p v-else>Panel content</p>
  </template>
</SSplitterPanel>

Persistence

autoSaveId (on SSplitter) remembers every panel's size across reloads, via localStorage by default - pass a custom storage object (anything shaped { getItem, setItem }) to persist somewhere else instead, the same mechanism DashboardGroup uses to persist to a cookie. Whichever storage is used, the remembered layout only applies once mounted, not during SSR - Reka's own layout-restore call runs inside a watch() callback, which Vue's SSR render pass doesn't flush.

Custom :ui

Each of the three components keeps its own theme file. To see exactly what you'd be overriding - the current default classes for every slot - here they are:

Splitter

SplitterPanel

SplitterPanel has no visual styling of its own beyond clipping overflow (see Usage above), but the slot is still there to override if you need to add your own:

SplitterResizeHandle

Props

Splitter

SplitterPanel

SplitterResizeHandle

Emits

Splitter

SplitterPanel

Slots

SplitterPanel

Methods

SplitterPanel

Access these via a template ref on SSplitterPanel.