Splitter

SSplitter divides an area into panels with draggable dividers — the user sets the width/height of the sections (sidebar + content, editor + preview). The handles are keyboard accessible (arrow keys resize), and Reka keeps the ARIA attributes. Panels are described with the panels array, content goes into the panel-0, panel-1, … slots (or by name).

Basic usage

<script setup>
const panels = [
  { defaultSize: 30, minSize: 15 },
  { defaultSize: 70, minSize: 30 },
]
</script>

<template>
  <SSplitter :panels="panels">
    <template #panel-0>Sidebar</template>
    <template #panel-1>Main area</template>
  </SSplitter>
</template>

Vertical split

<template>
  <SSplitter
    :panels="panels"
    direction="vertical"
  >
    <template #panel-0>Top panel</template>
    <template #panel-1>Bottom panel</template>
  </SSplitter>
</template>

API

Props

Name	Type	Default	Description
panels*	{ name?: string; defaultSize?: number; minSize?: number; maxSize?: number; collapsible?: boolean }[]	required	Panel definitions. A resize handle is inserted automatically between adjacent panels.
direction	"vertical" | "horizontal"	"horizontal"	Split direction: horizontal places panels side by side, vertical stacks them.