Splitter

Resizable split panels. Drag the handle between panels to resize them.

Panel A

Panel B

<template>
  <VxSplitter>
    <VxSplitterPanel>Panel A</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Panel B</VxSplitterPanel>
  </VxSplitter>
</template>

Vertical

Top

Bottom

<template>
  <VxSplitter direction="vertical">
    <VxSplitterPanel>Top</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Bottom</VxSplitterPanel>
  </VxSplitter>
</template>

Initial Size

Set the initial size of a panel as a percentage.

30%

70%

<template>
  <VxSplitter>
    <VxSplitterPanel :size="30">30%</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="70">70%</VxSplitterPanel>
  </VxSplitter>
</template>

Min / Max Size

Constrain how small or large a panel can be.

Min 20% / Max 60%

Flexible

<template>
  <VxSplitter>
    <VxSplitterPanel :min-size="20" :max-size="60">Constrained</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Flexible</VxSplitterPanel>
  </VxSplitter>
</template>

Three Panels

Sidebar

Main

Inspector

<template>
  <VxSplitter>
    <VxSplitterPanel :size="25">Sidebar</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="50">Main</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="25">Inspector</VxSplitterPanel>
  </VxSplitter>
</template>

Nested

Combine horizontal and vertical splitters.

Sidebar

Editor

Terminal

<template>
  <VxSplitter>
    <VxSplitterPanel :size="30">Sidebar</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel :size="70">
      <VxSplitter direction="vertical">
        <VxSplitterPanel :size="60">Editor</VxSplitterPanel>
        <VxSplitterHandle />
        <VxSplitterPanel :size="40">Terminal</VxSplitterPanel>
      </VxSplitter>
    </VxSplitterPanel>
  </VxSplitter>
</template>

Disabled Handle

Prevent a handle from being dragged.

Fixed

This handle cannot be dragged

<template>
  <VxSplitter>
    <VxSplitterPanel :size="40">Fixed</VxSplitterPanel>
    <VxSplitterHandle disabled />
    <VxSplitterPanel :size="60">Cannot drag</VxSplitterPanel>
  </VxSplitter>
</template>

Collapsible Panel

Toggle a panel open/closed with a button. The panel animates to zero width.

Sidebar

Main Content

<script setup>
import { ref } from 'vue'
const collapsed = ref(false)
</script>

<template>
  <VxButton @click="collapsed = !collapsed">
    {{ collapsed ? 'Open' : 'Close' }}
  </VxButton>
  <VxSplitter>
    <VxSplitterPanel :size="30" collapsible :collapsed="collapsed">
      Sidebar
    </VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Main</VxSplitterPanel>
  </VxSplitter>
</template>

Lazy

Only fires the resize event when the drag ends, not during. Better for heavy content.

Panel A

Panel B (resize fires on drop)

<template>
  <VxSplitter lazy @resize="onResize">
    <VxSplitterPanel>Panel A</VxSplitterPanel>
    <VxSplitterHandle />
    <VxSplitterPanel>Panel B</VxSplitterPanel>
  </VxSplitter>
</template>

Props

VxSplitter

Prop	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	Split direction
lazy	boolean	false	Only emit resize on drag end

VxSplitterPanel

Prop	Type	Default	Description
size	number	—	Initial size as percentage
minSize	number	0	Minimum size as percentage
maxSize	number	100	Maximum size as percentage
collapsible	boolean	false	Allow panel to be collapsed
collapsed	boolean	false	Collapsed state

VxSplitterHandle

Prop	Type	Default	Description
disabled	boolean	false	Disable dragging

Events

Event	Type	Description
resize	(sizes: number[]) => void	Fires during drag (or on drop if lazy)