---
url: /documentation/user-interface/components/splitview.md
---

# 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

## 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:

```vue
<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):

```vue
<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:

```vue
<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