Preview Updated 2026-05-10

Splitter

Drag the divider to resize two panels — horizontal / vertical, keyboard accessible, controllable.

Basic usage

v-model binds a number. With unit="%" (default) it’s a percentage; with unit="px" it’s pixels. min / max clamp the range. After focusing the divider with the keyboard: ← / → for fine adjustment (Shift jumps by 10), Home / End jump to the extremes.

侧栏

当前宽度：35%。拖动中间分隔条调整。

主区域

键盘可用：聚焦分隔条后 ←→ 微调，Shift+←→ 跳大步，Home/End 直接到极值。

<script setup lang="ts">
import { ref } from 'vue';
import { CfSplitter } from '@chufix-design/vue';

const size = ref(35);
</script>

<template>
<CfSplitter v-model="size" :min="15" :max="85">
  <template #start>Sidebar</template>
  <template #end>Main</template>
</CfSplitter>
</template>

import { useState } from 'react';
import { CfSplitter } from '@chufix-design/react';

export default function Demo() {
const [size, setSize] = useState(35);
return (
  <CfSplitter
    value={size}
    min={15}
    max={85}
    start={<div>Sidebar</div>}
    end={<div>Main</div>}
    onChange={setSize}
  />
);
}

Vertical

orientation="vertical" rotates the divider horizontally, splitting top and bottom panels. Common for editor + console or table + detail layouts.

编辑器

function hello() {
  return 'hi';
}

控制台

> hi

<CfSplitter v-model="size" orientation="vertical" :min="20" :max="80">
<template #start>Editor</template>
<template #end>Console</template>
</CfSplitter>

<CfSplitter
value={size}
orientation="vertical"
min={20}
max={80}
start={<div>Editor</div>}
end={<div>Console</div>}
onChange={setSize}
/>

Pixel unit

unit="px" switches the value to pixels — ideal when the sidebar width must be precise (and shouldn’t change with the viewport like % does).

侧栏 — 当前 220px

主区域

<CfSplitter v-model="size" unit="px" :min="120" :max="480">
<template #start>Sidebar — currently {{ size }}px</template>
<template #end>Main</template>
</CfSplitter>

<CfSplitter
value={size}
onChange={setSize}
unit="px"
min={120}
max={480}
start={<div>Sidebar — currently {size}px</div>}
end={<div>Main</div>}
/>

Disabled

disabled locks the divider — the current ratio is still rendered but users can’t drag. Common in demo states or restricted-permission views.

禁用 — 无法拖拽

分隔条仅作展示

<CfSplitter v-model="size" disabled />

<CfSplitter value={size} disabled />

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`number`	`—`	Controlled size value; omit to self-manage with `defaultSize`
`defaultSize` (Vue) / `defaultValue` (React)	`number`	`30`	Initial size
`unit`	`'%' \| 'px'`	`'%'`	Value unit
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction
`min` / `max`	`number`	`10` / `90`	Value bounds (matching `unit`)
`disabled`	`boolean`	`false`	Disable dragging
`collapsible`	`boolean`	`false`	Enable Enter / Space to toggle between `min` and `defaultSize`
`resizeFrom`	`'start' \| 'end'`	`'start'`	Which side the value tracks

Events: update:modelValue / resize (React: onChange / onResize). Slots: start / end (React uses same-named props that accept ReactNode).