Usage

Hook for adding drag-to-resize behavior to layout regions. Supports single-region and multi-region configurations with snap points, collapsible panels, localStorage persistence, and cascade resize ordering.

import { useResizable } from '@astryx-vue/core'

Best practices

Guidance	Practices
Do	Use percent(40, { min: pixel(333) }) for a 40% size with a 333px floor, or percent(10, { max: pixel(400) }) for a 10% size with a 400px ceiling. The options argument is required and carries a floor XOR a ceiling.
Do	A structured default is an initial choice only; a structured minSize or maxSize remains live. State, persistence, callbacks, resize(), paint, and ARIA all use resolved pixel numbers.
Do	Import percent from @astryx-vue/core and Table's pixel from @astryx-vue/core/Table. They are the same pixel binding, exposed once from each entry.
Do	Use with Layout or AppShell sidebar for resizable navigation panels.
Do	Set autoSaveId to persist user-chosen sizes across page reloads.
Don't	Set minSize too small; content becomes unreadable. Prefer collapsible for panels that can hide entirely.

Examples

Common configurations, variations, and states.

Resizable

Sidebar

200px wide

Content

Drag the handle to resize the sidebar.

Horizontal resizable split with a draggable handle between two panels.

Resizable — Collapsible with snap points

200px wide

Drag the handle — it snaps at 200px and 280px. Drag all the way left to collapse the sidebar.

A collapsible sidebar with snap points, driven by useResizable. Dragging snaps to preset widths, dragging past the minimum collapses the panel, and the expand method restores it programmatically.