Parts

Splitter Container - component's container, providing calculation base for all child blocks (all child values are converted to percents of the container's size).
Start/End Panel - part of the Splitter Container, allowing to pass content to it via named slots. Size is setting up via width/height of the computed styles object.
Dragger - base block, allowing to initiate dragging state. Always has a size of 1px and relative position.
Overriding ears - we don't want dragger to take away a lot of place from panels, but 1px is also hard to focus via mouse. So, overriding transparent ears allow us to have a wider zone (--va-split-dragger-overlay-size) for starting dragging without hiding panels content.
Snapping Mark - virtual mark the dragger will jump to when it will be at distance lesser than snapping range.
Snapping Range - distance that will cause splitter dragger jumping to the related Snapping Mark.
Limits - panels min-max width/height limits.

Behavior

behaviour

aluarius commented 2 years ago

@m0ksem take a look please.

m0ksem commented 1 year ago

Would be nice to place it somewhere in docs or in component folder. Better place it in docs in dev footer.