Drawer

A drawer that slides up from the bottom. Drag it down to dismiss: release past 30% of its height or fling it down to close; otherwise it springs back.

Usage

SDrawer({ open: this.open!! }) {
  SDrawerTrigger() { SButton({ text: 'Open Drawer', variant: 'outline' }) }
  SDrawerContent() {
    SDrawerHeader() {
      SDrawerTitle({ text: 'Move Goal' })
      SDrawerDescription({ text: 'Set your daily activity goal.' })
    }
    ...
    SDrawerFooter() {
      SButton({ text: 'Submit' })
      SDrawerClose() { SButton({ text: 'Cancel', variant: 'outline' }) }
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SDrawer

shadcn-vue Drawer (vaul): a bottom panel with a drag handle that can be dragged down to dismiss.

Drag the panel down: it follows the finger; releasing past 30% of its height (or flinging down) closes it, otherwise it springs back (motion key 'drawer').

Prop	Type	Default	Description
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SDrawerTrigger

Slots: children (trailing closure)

SDrawerClose

Slots: children (trailing closure)

SDrawerContent

The drawer panel (bg-background rounded-t-lg border-t max-h-[80vh] + handle mt-4 h-2 w-[100px] rounded-full bg-muted), presented as a bottom sheet of the overlay host.

Prop	Type	Default	Description
dismissOnOutside	boolean	true
dragToDismiss	boolean	true	allow drag-to-dismiss
tokens	DrawerTokens	{}	per-instance panel tokens (instance → --drawer-* tokens → recipe), see {@link DrawerTokens}

Slots: children (trailing closure)

SDrawerHeader

flex flex-col gap-1.5 p-4, centred text on compact windows (shadcn: text-center md:text-left).

Slots: children (trailing closure)

SDrawerFooter

mt-auto flex flex-col gap-2 p-4.

Slots: children (trailing closure)

SDrawerTitle

Prop	Type	Default	Description
text	ResourceStr	''

SDrawerDescription

Prop	Type	Default	Description
text	ResourceStr	''