Splitter

Панели с изменяемым размером. Перетаскивайте маркер между панелями, чтобы изменить их размер.

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

Задайте начальный размер панели в процентах.

30%

70%

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

Min / Max Size

Ограничьте минимальный и максимальный размер панели.

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

Комбинируйте горизонтальные и вертикальные разделители.

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

Запрет перетаскивания маркера.

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

Переключайте открытие/закрытие панели с помощью кнопки. Панель анимируется до нулевой ширины.

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

Событие resize вызывается только при завершении перетаскивания, а не во время. Лучше для тяжёлого контента.

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'	Направление разделения
lazy	boolean	false	Эмитить resize только в конце перетаскивания

VxSplitterPanel

Prop	Type	Default	Description
size	number	—	Начальный размер в процентах
minSize	number	0	Минимальный размер в процентах
maxSize	number	100	Максимальный размер в процентах
collapsible	boolean	false	Разрешить сворачивание панели
collapsed	boolean	false	Состояние свёрнутости

VxSplitterHandle

Prop	Type	Default	Description
disabled	boolean	false	Отключить перетаскивание

Events

Event	Type	Description
resize	(sizes: number[]) => void	Вызывается во время перетаскивания (или при отпускании при lazy)