Resize Handle Props

Name	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	horizontal changes width. vertical changes height. A horizontal handle sets aria-orientation="vertical".
position	'inline' | 'overlay'	'inline'	inline takes a track. overlay sits on the parent edge.
isReversed	boolean	false	Flips the drag when the panel is on the end edge.
isDisabled	boolean	false	Turns pointer and keyboard resizing off.
hasDivider	boolean	false	Draws the 1px line. The line is the handle.
isAlwaysVisible	boolean	true	Keeps the grip visible at rest.
pillPlacement	'auto' | 'start' | 'end' | 'center'	'auto'	Where the grip sits on the line. auto stays on the panel side, and flips when the panel size is 0.
label	string	locale string	Accessible name. The English default is “Resize handle”.
resizable	ResizableProps	-	The props object returned by useResizable.

Slots

Name	Description
default	Replaces the grip. The separator role and keyboard behavior stay on the handle.

useResizable

Import it from @astryx-vue/core. A single region returns { size, isCollapsed, collapse, expand, resize, props }. A regions map returns one of those objects per key.

Name	Type	Default	Description
defaultSize	number | string | ResizablePercentSize	250	Starting size. A number is pixels. With snap points, the starting value moves to the nearest point.
minSize	number | string | ResizablePercentSize	50	Smallest expanded size.
maxSize	number | string | ResizablePercentSize	Infinity	Largest size.
collapsible	boolean	false	Allows the region to collapse to 0.
collapsedSize	number	40	A drag below this pixel value collapses the region.
snaps	number[]	-	The size stops only on these pixel points. An equal distance stays on the earlier point.
shrinkOrder	number	-	Cascade priority for a regions map that shares containerRef. A lower number shrinks to minSize first when the container is narrower than the regions. Dragging still sets that region’s preferred size.
direction	'horizontal' | 'vertical'	'horizontal'	Which container axis the percentage sizes read.
containerRef	Ref<HTMLElement | null>	-	Element used to resolve percentages. An unmeasured container uses 1200 and does not persist.
autoSaveId	string	-	Stores { size, isCollapsed } at astryx-resizable: plus this id. A regions map appends :key.
defaultIsCollapsed	boolean	false	Starts collapsed when collapsible is true.
isCollapsed	boolean	-	Controlled collapsed state. Changes are reported through onCollapseChange.
onSizeChange	(size: number) => void	-	Called after a resize settles on a size.
onCollapseChange	(isCollapsed: boolean) => void	-	Called when the collapsed state changes.
regions	Record<string, ResizableRegionConfig>	-	Several regions. Each entry accepts the size fields above.

percent(value, { min }) or percent(value, { max }) builds a percentage size. min and max use { type: 'pixel', value }.

Arrow keys move 10px. Shift moves 50px. With snap points, an arrow jumps to the next point and Shift jumps two. Home, End, and Enter jump to the minimum, a configured maximum, and the size from before collapse. End does nothing when no maximum is set.

Native attributes

ResizeHandle renders a <div role="separator">.

The following go to that element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged.