Slide Drawer

Side-sliding drawer styled like Sheet but with a fixed body, header, and footer layout. Use for detail panels that always need a sticky header and footer.

When to use SlideDrawer vs Sheet

Sheet is the lightweight side panel. SlideDrawer adds a header/body/footer layout convention so headers and footers stay sticky as the body scrolls.

Default

Header, scrollable body, sticky footer.

Order details

INV-001 · Olivia Martin

Body scrolls; header and footer stay fixed.

Without handle

Set show-handle to false to hide the drag grabber.

Confirm action

Set show-handle to false to hide the grabber.

The drag handle at the top is hidden.

With form

Labelled fields in the body with actions in the sticky footer.

Edit profile

Update your details and save.

Name

API Reference

Props, events, and slots for each sub-component.

SlideDrawer

Props

Prop	Type	Default	Description
open	boolean	false	Open state. Supports v-model:open.
showHandle	boolean	true	Show the drag grabber at the top of the drawer.

Events

Event	Description
update:open	Fires when the drawer opens or closes. Enables v-model:open.

SlideDrawerHeader / SlideDrawerBody / SlideDrawerFooter

Props

Prop	Type	Default	Description
class	string	—	Header and footer stay sticky; Body is the scrollable middle region.

SlideDrawerTitle / SlideDrawerDescription

Props

Prop	Type	Default	Description
class	string	—	Typography for the drawer heading and supporting text.

Skeleton Slider