Split #
va-split
component splits container into 2 horizontal/vertical panels. You can change panels sizes via grabbing the separator-grabber between them.
Examples #
Basic usage #
Vertical #
Prop vertical
changes components orientation to vertical.
Custom grabber #
You can pass via grabber
slot any content which will overwrite default grabber (va-divider
).
Limits #
limits
prop allows you to set up panels min-max sizes. For example, [[10, 'any'], ['50px', '30rem']]
(sum of different panels min and max size should be equal to 100%) will set up min size of the start panel to 10%, max - 100%. For the end panel - 50px and 30rem accordingly. If you don't need max sizes limits but only min ones, you can use this record form: [10px, 50%]
.
Snapping #
snapping
and snapping-range
props allow you to set up a virtual marks, splitter will be 'jumping' to when it will be near of them. For example, snapping
with value ['20', 80]
and snapping-range
with value 5
will set up 2 marks - 20 and 80 percents of the splitter container size. Meanwhile, splitter will 'jump' to it when there is at least 5 percents of the container size between them.
Nested #
Passing another va-split
component via start
/end
slot you can gain different panels combinations.
Maximization #
Prop maximization
allows to maximize end panel size via double click on dragger (additional prop maximizeStart
changes this logic - start panel maximizing instead).
Disabled #
disabled
prop restricts to change panels size (including option via maximization
prop).
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
ariaLabel |
|
| |
disabled |
|
| |
limits |
|
| |
maximization |
|
| |
maximizeStart |
|
| |
modelValue |
|
| |
preset |
| - | |
snapping |
| - | |
snappingRange |
|
| |
stateful |
|
| |
vertical |
|
|
Events #
Name | Description |
---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
Name | Description |
---|---|
dragger | Changes default separator-dragger ( |
end | End panel content. |
start | Start panel content. |
Css Variables #
Name | Default Value |
---|---|
--va-split-panel-overflow | auto |
--va-split-dragger-display | flex |
--va-split-dragger-justify-content | center |
--va-split-dragger-align-items | center |
--va-split-dragger-overlay-size | 1rem |
--va-split-dragging-cursor | grabbing |
--va-split-horizontal-dragger-cursor | col-resize |
--va-split-vertical-dragger-cursor | row-resize |