DrawerContent
Source: client/lib/theme/vueda-tailwind/shell/index.js
The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded.
Vue component: DrawerContent
| Slot | Default classes | Description |
|---|---|---|
| root | 5 classes | The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded. |
| handle | 2 classes | The drag handle shown for bottom drawers. It stays hidden for other drawer directions where the edge affordance would be misleading. |
root
The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded.
Default classes:
text
group/drawer-content bg-background text-foreground fixed z-50 flex h-auto flex-col
data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-vueda-modal
data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-vueda-modal
data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm
data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-smSource: client/lib/theme/vueda-tailwind/shell/DrawerContent.theme.js:18
handle
The drag handle shown for bottom drawers. It stays hidden for other drawer directions where the edge affordance would be misleading.
Default classes:
text
bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full
group-data-[vaul-drawer-direction=bottom]/drawer-content:blockSource: client/lib/theme/vueda-tailwind/shell/DrawerContent.theme.js:39