Resizable

Split a region into two keyboard-resizable panels.

Resizable divides an available region into two panels and lets people adjust the balance without losing either view. It is useful for navigation and content, inspectors, editors, and side-by-side comparison.

Variants and behaviour

Choose horizontal splitting for side-by-side panels or vertical splitting for stacked panels. The first panel size is bindable and may be constrained with minimum and maximum percentages; the handle also supports pointer and keyboard input.

Customization

Provide the two panels through the first and second snippets, using ordinary Svelte layout inside each. Set the enclosing region’s height, then use minSize and maxSize to prevent either panel from becoming impractically small.

Examples

Installation

Install the package, then import only the components a route uses. Exports are tree-shakable.

Install

pnpm add fractalsvelte

Import

<script lang="ts">
	import { Resizable } from 'fractalsvelte';
</script>

Usage

<script lang="ts">
	import { Resizable } from 'fractalsvelte';
</script>

<Resizable direction="horizontal">
	{#snippet first()}<p>Navigation</p>{/snippet}
	{#snippet second()}<p>Content</p>{/snippet}
</Resizable>

Props

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Axis along which the panel divider moves.
`size`	`number`	`50`	Percentage allocated to the first panel. Supports bind:.
`minSize`	`number`	`20`	Smallest permitted percentage for the first panel.
`maxSize`	`number`	`80`	Largest permitted percentage for the first panel.
`first`	`Snippet`	`-`	Content rendered in the first panel.
`second`	`Snippet`	`-`	Content rendered in the second panel.