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.
Vertical
Use vertical orientation.
Collapsible
Configuring collapsible
provides quick shrinking capability. You can use the min
property to prevent expanding through dragging after collapsing.
Disable drag
When either panel disables resizable
, dragging will be disabled.
Panel size
v-model:size
can get the panel size.
Lazy 2.11.0
When lazy
is enabled, the panel size will not update in real time during dragging, but only after the drag ends.
Splitter API
Splitter Attributes
Name | Description | Type | Default |
---|---|---|---|
layout | Layout direction of the splitter | enum | horizontal |
lazy 2.11.0 | Whether to enable lazy mode | boolean | false |
Splitter Events
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 |
SplitterPanel API
SplitterPanel Attributes
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 |
SplitterPanel Events
Name | Description | type |
---|---|---|
update:size | Triggered when panel size changes | Function |
SplitterPanel Slots
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 |