◇

Drawer

7 parts

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  DrawerRoot,
  DrawerRootNested,
  DrawerContent,
  DrawerOverlay,
  DrawerHandle,
  DrawerTrigger,
  DrawerClose,
} from '@robonen/primitives/overlays/drawer';

<DrawerRoot>
  <DrawerRootNested />
  <DrawerContent />
  <DrawerOverlay />
  <DrawerHandle />
  <DrawerTrigger />
  <DrawerClose />
</DrawerRoot>

API Reference

DrawerRoot

Root

No props or events — renders its element and forwards attributes.

DrawerRootNested

RootNested

No props or events — renders its element and forwards attributes.

DrawerContent

Content

The draggable drawer panel. Wraps Dialog's Content (so it keeps focus trapping, scroll locking, and dismissal) and adds the pointer-drag gesture, snap-point positioning, and the `data-drawer-*` hooks the CSS animates. Bring your own size/colour/padding via `class`/`style`.

No props or events — renders its element and forwards attributes.

DrawerOverlay

Overlay

The dimming layer behind the drawer. Wraps Dialog's Overlay and exposes the `data-drawer-overlay` hooks so its opacity can fade in step with the drag and with snap points. Only renders for modal drawers.

No props or events — renders its element and forwards attributes.

DrawerHandle

Handle

No props or events — renders its element and forwards attributes.

DrawerTrigger

Trigger

The button that toggles the drawer open. A thin wrapper over Dialog's Trigger that tags the resulting `update:open` with the `trigger-press` reason.

No props or events — renders its element and forwards attributes.

DrawerClose

A button that closes the drawer when activated. A thin wrapper over Dialog's Close that tags the resulting `update:open` with the `close-press` reason.

No props or events — renders its element and forwards attributes.