Layout & Structure

Resizable

A draggable handle for letting the user resize a panel between a min and max size.

This site's own sidebar is built with Resizable. Drag its right edge to try it.

Install

import { Resizable } from 'vael-ui'

Playground

Drag the handle

min

max

direction

edge

disabled

ariaLabel

size

import { Resizable } from 'vael-ui'

<Resizable :min="0" :max="0" direction="horizontal" edge="end" :disabled="false" ariaLabel="Resize" :size="150">Resizable</Resizable>

Props

Name	Type	Default
`min`	`number \| undefined`	`0`
`max`	`number \| undefined`	`Infinity`
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`
`edge`	`"start" \| "end"`	`"end"`
`disabled`	`boolean \| undefined`	`false`
`ariaLabel`	`string \| undefined`	`"Resize"`
`ui`	`Partial<{ root: UiPartValue; handle: UiPartValue; }> \| undefined`
`size`	`number`

Slots

Name	Type	Description
`default`	`any`
`handle`	`any`

Events

Name	Type	Description
`update:size`	`[value: number]`

Exposed

Name	Type	Description
`el`	`HTMLElement \| null`
`handleEl`	`HTMLElement \| null`
`isDragging`	`boolean`