1.1.3 • Published 7 months ago
@rich_harris/svelte-split-pane v1.1.3
svelte-split-pane
A <SplitPane>
component.
Usage
<script>
import { SplitPane } from '@rich_harris/svelte-split-pane';
const dividerColor = 'black';
const dividerThickness = '20px';
</script>
<SplitPane
type="horizontal"
id="main"
min="100px"
max="-100px"
pos="50%"
priority="min"
--color={dividerColor}
--thickness={dividerThickness}
>
<section slot="a">this is on the left</section>
<section slot="b">this is on the right</section>
</SplitPane>
Of the properties that can be set on the component, only type
is required:
type
can behorizontal
, in which case the panes will be split left-right, orvertical
in which case it will be split top-bottomid
will be added to the element as adata-pane={id}
attribute, allowing you to (for example) override the--pos
CSS custom property on mobilemin
,max
andpos
can be expressed as${number}%
,${number}px
,${number}em
or${number}rem
. Positive numbers are measured from the left/top, negative numbers are measured from the right/bottompriority
determines whether themin
ormax
constraint wins in cases where they conflict--color
determines the color of the divider between panes, and defaults totransparent
--thickness
determines how thick the 'hit area' is for the divider, and defaults to8px