Drawer

A drawer component for Vue.

Examples

Default

<Drawer>
  <DrawerTrigger as-child>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <div class="mx-auto w-full max-w-sm">
      <DrawerHeader>
        <DrawerTitle>Move Goal</DrawerTitle>
        <DrawerDescription>Set your daily activity goal.</DrawerDescription>
      </DrawerHeader>
      <div class="p-4 pb-0">
        <div class="flex items-center justify-center space-x-2">
          <span class="text-4xl font-bold tracking-tighter">
            400
          </span>
          <span class="text-[0.70rem] uppercase text-muted-foreground">
            Calories/day
          </span>
        </div>
      </div>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose as-child>
          <Button variant="outline">
            Cancel
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </div>
  </DrawerContent>
</Drawer>

Props

Drawer

Prop	Type	Default	Description
activeSnapPoint	string | number	-	The current active snap point.
closeThreshold	number	-	The fraction of the drag distance that determines when the drawer should close.
shouldScaleBackground	boolean	true	Whether the background should scale when the drawer is open.
scrollLockTimeout	number	-	The duration in milliseconds to wait before unlocking scrolling.
fixed	boolean	-	Whether the drawer is fixed.
dismissible	boolean	true	Whether the drawer can be dismissed.
modal	boolean	true	Whether the drawer is modal.
open	boolean	-	Whether the drawer is open.
defaultOpen	boolean	-	Whether the drawer is open by default.

Slots

Drawer

Slot	Description
default	The content of the drawer.