Drawer

Overview

Root Drawer component, a mobile-friendly dialog variant that slides in from an edge and supports drag-to-dismiss.

Props

Name	Type	Required	Default	Description
open	boolean		undefined	Whether the drawer is open.
defaultOpen	boolean		undefined	The default open state.
modal	boolean		undefined	Whether to use modal behavior.
shouldScaleBackground	boolean		true	Whether to scale the background when the drawer opens.
setBackgroundColorOnScale	boolean		undefined	Whether to change the background color when scaled.
direction	string		undefined	Direction the drawer slides in from.
dismissible	boolean		undefined	Whether the drawer can be dismissed by dragging, clicking outside, or pressing escape.
handleOnly	boolean		undefined	When true, only allows the drawer to be dragged by the handle component.
nested	boolean		undefined	Whether this is a nested drawer.
fixed	boolean		undefined	When true, prevents the drawer from moving upward when the keyboard opens.
noBodyStyles	boolean		undefined	When true, prevents vaul from applying styles to the body element.
closeThreshold	number		undefined	Drag percentage threshold (0 to 1) required to close the drawer.
scrollLockTimeout	number		undefined	Duration in ms after scrolling before drag is re-enabled.
snapPoints	array		undefined	Snap points as fractions (0 to 1) of screen height.
activeSnapPoint	number|string		undefined	The currently active snap point.
preventScrollRestoration	boolean		undefined	Whether to prevent scroll restoration on close.

Slots

default

Scoped slot.

Events

Name	Description
update:open	Emitted when the open state changes.
update:activeSnapPoint	Emitted when the active snap point changes.
drag	Emitted while the drawer is being dragged.
release	Emitted when the drag is released.
close	Emitted when the close action is triggered.
animationEnd	Emitted when the open or close animation ends.

Full event reference

Source

client/lib/shell/drawer/Drawer.vue