Splitter beta

Divide the area horizontally or vertically, and freely drag to adjust the size of each area.

Basic usage

The most basic usage, if no default size is passed, it will be automatically divided equally.

Use vertical orientation.

Configuring collapsible provides quick shrinking capability. You can use the min property to prevent expanding through dragging after collapsing.

enable

When either panel disables resizable, dragging will be disabled.

disable

drag disable

v-model:size can get the panel size.

100px

When lazy is enabled, the panel size will not update in real time during dragging, but only after the drag ends.

Name	Description	Type	Default
layout	Layout direction of the splitter	`enum`	horizontal
lazy 2.11.0	Whether to enable lazy mode	`boolean`	false

Name	Description	type
resize-start	Triggered when starting to resize a panel, `index` is the drag bar index	`Function`
resize	Triggered while resizing a panel, `index` is the drag bar index	`Function`
resize-end	Triggered when panel resizing ends, `index` is the drag bar index	`Function`
collapse 2.10.3	Triggered when a panel is collapsed, `index` is the drag bar index	`Function`

Name	Description	Type	Default
size / v-model:size	Size of the panel (in pixels or percentage)	`string` / `number`	-
min	Minimum size of the panel (in pixels or percentage)	`string` / `number`	-
max	Maximum size of the panel (in pixels or percentage)	`string` / `number`	-
resizable	Whether the panel can be resized	`boolean`	true
collapsible	Whether the panel can be collapsed	`boolean`	false

Name	Description	type
update:size	Triggered when panel size changes	`Function`

Name	Description
default	Default content of the panel
start-collapsible	Custom content for the start collapsible button
end-collapsible	Custom content for the end collapsible button