ISplitter ​

Resizable panes divided by a draggable handle — a list beside a detail view, an editor above a preview.

<ISplitter :panels="[{ size: 35, minSize: 20 }, { size: 65, minSize: 30 }]">
  <template #panel-0>
    <div>List</div>
  </template>
  <template #panel-1>
    <div>Detail</div>
  </template>
</ISplitter>

Panels come from the panels prop and their content from numbered slots — #panel-0, #panel-1, and so on. The splitter fills its container, so give that container a height.

Sizes ​

Every size is a percentage of the group. size is where a panel starts, minSize and maxSize are how far it can be dragged.

const panels = [
  { size: 25, minSize: 15, maxSize: 40 },
  { size: 75 },
]

Leave panels off entirely for two panels split evenly.

Vertical ​

<ISplitter direction="vertical" :panels="[{ size: 60 }, { size: 40, minSize: 15 }]">
  <template #panel-0><Editor /></template>
  <template #panel-1><Output /></template>
</ISplitter>

Three panes ​

A handle goes between panels, so three panels get two handles.

<ISplitter
  :panels="[{ size: 25, minSize: 15 }, { size: 50 }, { size: 25, minSize: 15 }]"
  @layout="onLayout"
>
  <template #panel-0><Nav /></template>
  <template #panel-1><Main /></template>
  <template #panel-2><Inspector /></template>
</ISplitter>

Collapsing ​

collapsible lets a panel be dragged shut past its minSize; collapsedSize is what "shut" means, as a percentage. 0 hides it entirely.

const panels = [
  { size: 25, minSize: 15, collapsible: true, collapsedSize: 0 },
  { size: 75 },
]

Remembering the arrangement ​

Give auto-save-id a stable key and the layout is stored in localStorage, surviving a reload.

<ISplitter auto-save-id="inbox-layout" :panels="panels" />

Props ​

SplitterPanelOption ​

Events ​

Slots ​

Accessibility ​

The handle is a focusable separator, reachable by Tab and moved with the arrow keys; keyboardResizeBy sets how far each press goes. Its hit area is padded well beyond the visible rule.