Resizable

Panels that the user resizes by dragging the separators between them or with the keyboard.

Sidebar

Content

<script lang="ts">
	import { Resizable } from '@sveltery/base/resizable';
	import styles from './index.module.css';
</script>

<div class={styles.Container}>
	<Resizable.Group>
		<Resizable.Panel defaultSize="30%" minSize="20%" class={styles.Panel}>Sidebar</Resizable.Panel>
		<Resizable.Separator class={styles.Separator} />
		<Resizable.Panel minSize="30%" class={styles.Panel}>Content</Resizable.Panel>
	</Resizable.Group>
</div>

Resizable ports react-resizable-panels 4.5.8. Its layout engine is copied from upstream, and the parts are Svelte rewrites of its React components.

Anatomy

Import the component and assemble its parts:

Anatomy

<script lang="ts">
	import { Resizable } from '@sveltery/base/resizable';
</script>

<Resizable.Group>
	<Resizable.Panel />
	<Resizable.Separator />
	<Resizable.Panel />
</Resizable.Group>

Panels and separators must be direct children of their group’s element.

Examples

Sizes

defaultSize, minSize, maxSize and collapsedSize take a number of pixels or a string with a unit: %, px, em, rem, vh or vw. A string without a unit is a percentage.

Sizes

<Resizable.Group orientation="vertical">
	<Resizable.Panel defaultSize="240px" minSize="10rem">Header</Resizable.Panel>
	<Resizable.Separator />
	<Resizable.Panel minSize="25%">Body</Resizable.Panel>
</Resizable.Group>

Collapsible panels and methods

A collapsible panel collapses when it is resized below its minSize, and Enter on the separator toggles it. bind:this on a panel gives collapse(), expand(), getSize(), isCollapsed() and resize(). bind:this on a group gives getLayout() and setLayout().

Panel methods

<script lang="ts">
	import { Resizable } from '@sveltery/base/resizable';

	let sidebar = $state<ReturnType<typeof Resizable.Panel>>();
</script>

<button onclick={() => (sidebar?.isCollapsed() ? sidebar.expand() : sidebar?.collapse())}>
	Toggle sidebar
</button>

<Resizable.Group>
	<Resizable.Panel bind:this={sidebar} collapsible minSize="15%">Sidebar</Resizable.Panel>
	<Resizable.Separator />
	<Resizable.Panel>Content</Resizable.Panel>
</Resizable.Group>

Saving the layout

useDefaultLayout reads a saved layout from localStorage, or any storage with getItem and setItem, and returns callbacks that save the layout when it settles. Call it while the component initializes. Give each panel an id, so the saved sizes match their panels.

Persistence

<script lang="ts">
	import { Resizable, useDefaultLayout } from '@sveltery/base/resizable';

	const { defaultLayout, onLayoutChanged } = useDefaultLayout({ id: 'editor' });
</script>

<Resizable.Group {defaultLayout} {onLayoutChanged}>
	<Resizable.Panel id="files">Files</Resizable.Panel>
	<Resizable.Separator />
	<Resizable.Panel id="editor">Editor</Resizable.Panel>
</Resizable.Group>

Reading an element

Put an attachment on a part to reach its element. The group, the separator and the outer element of a panel take it.

Attachment

<Resizable.Group {@attach (element) => console.log(element.clientWidth)}>
	<Resizable.Panel>One</Resizable.Panel>
	<Resizable.Separator />
	<Resizable.Panel>Two</Resizable.Panel>
</Resizable.Group>

Keyboard

A focused separator resizes the panel before it. The arrow keys along the group’s orientation move it by 5%. Home and End move it to its limits, and Enter collapses or expands a collapsible panel.

API reference

Group

Wraps a set of resizable panels, laid out horizontally or vertically. Renders a <div> element.

defaultLayout ResizableLayout | undefined —

Name: defaultLayout
Description: The layout the group starts with, such as one useDefaultLayout restored. Read once at mount.
Type: ResizableLayout | undefined

disableCursor boolean | undefined false

Name: disableCursor
Description: Whether to leave the cursor alone. By default, the group sets the cursor to show the resize direction while the pointer hovers or drags an edge.
Type: boolean | undefined
Default: false

onLayoutChange function | undefined —

Name: onLayoutChange
Description: Called while the layout changes. A pointer drag calls it on every move, so prefer onLayoutChanged for most cases.
Type: ((layout: ResizableLayout) => void) | undefined

onLayoutChanged function | undefined —

Name: onLayoutChanged
Description: Called once the layout has changed. A pointer drag calls it when the pointer is released. Save layouts from this callback.
Type: ((layout: ResizableLayout) => void) | undefined

resizeTargetMinimumSize { coarse: number; fine: number; } { coarse: 20, fine: 10 }

Name: resizeTargetMinimumSize
Description: The minimum size, in pixels, of the area that starts a resize around a separator or a panel edge, for coarse (touch) and fine (mouse) pointers.
Type: { coarse: number; fine: number; }
Default: { coarse: 20, fine: 10 }

disabled boolean | undefined false

Name: disabled
Description: Whether the panels of the group cannot be resized.
Type: boolean | undefined
Default: false

orientation ResizableOrientation | undefined 'horizontal'

Name: orientation
Description: The direction the panels are laid out and resized in.
Type: ResizableOrientation | undefined
Default: 'horizontal'

id string | number | undefined —

Name: id
Description: Identifies the group within the application. Falls back to a generated id. The element also takes it as data-testid.
Type: string | number | undefined

children Snippet —

Name: children
Description: The panels and separators of the group.
Type: Snippet

style string | null | undefined —

Name: style
Description: Inline styles for the group element. display, flex-direction, flex-wrap and overflow cannot be overridden.
Type: string | null | undefined

data-group

Present on every group.

data-testid

The group's id, for test queries.

Attribute	Description	-
`data-group`	Present on every group.
`data-testid`	The group's `id`, for test queries.

Panel

Wraps resizable content, with optional size constraints and collapsible behavior. Renders a <div> element.

collapsedSize number | string | undefined '0%'

Name: collapsedSize
Description: The panel's size when collapsed.
Type: number | string | undefined
Default: '0%'

collapsible boolean | undefined false

Name: collapsible
Description: Whether the panel collapses when it is resized below its minSize.
Type: boolean | undefined
Default: false

defaultSize number | string | undefined —

Name: defaultSize
Description: The size the panel starts with. Without it, the group shares out the free space.
Type: number | string | undefined

maxSize number | string | undefined '100%'

Name: maxSize
Description: The largest size of the panel.
Type: number | string | undefined
Default: '100%'

minSize number | string | undefined '0%'

Name: minSize
Description: The smallest size of the panel.
Type: number | string | undefined
Default: '0%'

onResize function | undefined —

Name: onResize
Description: Called when the panel's size changes, with the new size, the id prop and the previous size, which is undefined on mount.
Type: ((panelSize: ResizablePanelSize, id: string | number | undefined, prevPanelSize: ResizablePanelSize | undefined) => void) | undefined

id string | number | undefined —

Name: id
Description: Identifies the panel within its group. Falls back to a generated id. Saved layouts use it to match a size to its panel. The element also takes it as data-testid.
Type: string | number | undefined

class string | undefined —

Name: class
Description: CSS class for the inner element that holds the content, so the class does not interfere with the flex layout.
Type: string | undefined

style string | null | undefined —

Name: style
Description: Inline styles for the inner element that holds the content.
Type: string | null | undefined

data-panel

Present on every panel.

data-testid

The panel's id, for test queries.

Attribute	Description	-
`data-panel`	Present on every panel.
`data-testid`	The panel's `id`, for test queries.

Separator

A focusable handle between two panels that resizes them with the pointer and the keyboard. Renders a <div> element.

id string | number | undefined —

Name: id
Description: Identifies the separator within its group. Falls back to a generated id. The element also takes it as data-testid.
Type: string | number | undefined

style string | null | undefined —

Name: style
Description: Inline styles for the separator. flex-grow and flex-shrink cannot be overridden.
Type: string | null | undefined

data-separator

Whether the pointer is over the separator's hit area (hover), dragging it (active), or neither (inactive).

data-testid

The separator's id, for test queries.