SplitView

The SplitView component allows you to create a resizable split view layout with two panes separated by a draggable resizer. It supports both horizontal and vertical orientations, giving users full control over the layout proportions.

Preview

Horizontal Split (unchecked = vertical)

Pane A

This is Pane A. Drag the resizer to adjust the split.

Pane B

This is Pane B. The split view supports both horizontal and vertical orientations.

Features

• Resizable Panes: Users can drag the resizer to adjust pane sizes
• Dual Orientation: Supports both horizontal and vertical splits
• Smooth Resizing: Fluid drag interaction with visual feedback
• Customizable Styling: Style each pane and resizer independently
• Flexible Content: Accepts any content in either pane
• Keyboard Accessible: Resizer can be controlled with keyboard
• Touch Support: Works on touch devices

Props

Prop	Type	Required	Default	Description
aPaneStyle	string	No	""	Custom CSS classes for the first pane (pane A)
bPaneStyle	string	No	""	Custom CSS classes for the second pane (pane B)
splitViewStyle	string	No	""	Custom CSS classes for the split view container
resizerStyle	string	No	""	Custom CSS classes for the resizer element
resizerInnerStyle	string	No	""	Custom CSS classes for the inner resizer element
isHorizontal	boolean	No	false	Determines the orientation (false = vertical, true = horizontal)

Slots

Slot	Description
a	Content for the first pane (left pane in vertical mode, top pane in horizontal mode)
b	Content for the second pane (right pane in vertical mode, bottom pane in horizontal mode)

Usage

Basic Implementation (Vertical Split)

Create a simple vertical split view:

<template>
  <SplitView>
    <template #a>
      <div>Left Pane Content</div>
    </template>
    <template #b>
      <div>Right Pane Content</div>
    </template>
  </SplitView>
</template>

Horizontal Split

Create a horizontal split (top/bottom):

<template>
  <SplitView :is-horizontal="true">
    <template #a>
      <div>Top Pane Content</div>
    </template>
    <template #b>
      <div>Bottom Pane Content</div>
    </template>
  </SplitView>
</template>

With Custom Styling

Apply custom styles to panes and resizer:

<template>
  <SplitView
    a-pane-style="bg-blue-50 p-4"
    b-pane-style="bg-green-50 p-4"
    resizer-style="bg-gray-300"
  >
    <template #a>
      <div>Styled Left Pane</div>
    </template>
    <template #b>
      <div>Styled Right Pane</div>
    </template>
  </SplitView>
</template>

Orientation Modes

Vertical Split (Default)

┌─────────┬─────────┐
│         │         │
│ Pane A  │ Pane B  │
│  (a)    │  (b)    │
│         │         │
└─────────┴─────────┘

• isHorizontal="false" (default)
• Panes are side-by-side (left/right)
• Resizer is vertical
• Drag left/right to resize

Horizontal Split

┌───────────────────┐
│     Pane A (a)    │
├───────────────────┤
│     Pane B (b)    │
└───────────────────┘

• isHorizontal="true"
• Panes are stacked (top/bottom)
• Resizer is horizontal
• Drag up/down to resize