Resizable

Layout

Resizable panel via a drag-and-drop separator. Supports horizontal and vertical orientations.

Playground

Controls

Direction

Initial size (%)

Min size (%)

Max size (%)

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`"horizontal"`	Separator orientation.
`initialSize`	`number`	`50`	Initial size of panel A (%).
`minSize`	`number`	`15`	Minimum size of panel A (%).
`maxSize`	`number`	`85`	Maximum size of panel A (%).

Horizontal

vue

<DsResizable
  direction="horizontal"
  :initialSize="40"
/>

Vertical

vue

<DsResizable
  direction="vertical"
  :initialSize="40"
/>

Use DsResizableSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsResizableSkeleton />

The separator has role="separator" with aria-orientation, aria-valuenow, aria-valuemin, and aria-valuemax.
Supports mouse drag and touch on mobile.

FloatingActionButton

AlertDialog