Splitter

Provides relative resizing between two panes.

Code

<script lang="ts">
  import { Splitter } from '@geoffcox/sterling-svelte';
</script>

<Splitter resetOnDoubleClicks />

Members

Property Name	Type	Default	Comment
horizontal	boolean \| null \| undefined	undefined	When true, the panes are split top and bottom.
initialPrimarySize	CssSizeUnit \| undefined	50%	The initial size of the primary pane.
minPrimarySize	CssSizeUnit \| undefined	undefined	The minimize width or height of the primary pane.
minSecondarySize	CssSizeUnit \| undefined	undefined	The minimize width or height of the secondary pane.
primary	Snippet \| undefined	undefined	The content within the primary pane.
secondary	Snippet \| undefined	undefined	The content within the secondary pane.
split	Snippet \| undefined	<div class="default-split-line></div>	The visual split between the panes.
resetOnDoubleClick	boolean \| null \| undefined	undefined	When true, double-clicking the split will reset the primary pane to the initial primary size.

Types

	Type Name	Definition	Comment
	CssSizeUnit	A CSS length (e.g. 120px, 4em, 20ch, 2cm) or CSS percentage (e.g. 25%).

Considerations

Includes HTMLDivElement props, events, and methods.

Anatomy

<div class="sterling-splitter">
    <div class="primary">
      {@render primary()}
    </div>
    <div class="split">
      {#if split}
        {@render split()}
      {:else}
        <div class="default-split-line"></div>
      {/if}
    </div>
    <div class="secondary">
      {@render secondary()}
    </div>
</div>