Components
Drawer
Drawer, dressed in the paper-and-ink system: a full-height sheet cut flush to the edge it rises from, sliding on the machine's translate under the grabber's hand. The parts — Root, Trigger, Backdrop, Positioner, Content, Grabber, GrabberIndicator, Title, Description, CloseTrigger, SwipeArea.
#Basic usage
<script setup lang="ts">
import { x } from "@bysages/icons";
import { Drawer, Icon } from "@bysages/vue";
</script>
<template>
<Drawer.Root>
<Drawer.Trigger>Open drawer</Drawer.Trigger>
<Teleport to="body">
<Drawer.Backdrop />
<Drawer.Positioner>
<Drawer.Content>
<Drawer.Grabber><Drawer.GrabberIndicator /></Drawer.Grabber>
<Drawer.Title>Settings</Drawer.Title>
<Drawer.Description>
Preferences travel with the sheet — pull the grabber to put them away.
</Drawer.Description>
<p>The rest of the sheet is yours to fill.</p>
<Drawer.CloseTrigger>
<Icon :glyph="x" />
</Drawer.CloseTrigger>
</Drawer.Content>
</Drawer.Positioner>
</Teleport>
</Drawer.Root>
</template>
<script setup lang="ts">
import { x } from "@bysages/icons";
import { Drawer, Icon } from "@bysages/vue";
const directions = [
{ value: "down", edge: "bottom" },
{ value: "up", edge: "top" },
{ value: "start", edge: "left" },
{ value: "end", edge: "right" },
] as const;
</script>
<template>
<div class="flex flex-wrap gap-3">
<Drawer.Root v-for="d in directions" :key="d.value" :swipe-direction="d.value">
<Drawer.Trigger>From the {{ d.edge }}</Drawer.Trigger>
<Teleport to="body">
<Drawer.Backdrop />
<Drawer.Positioner>
<Drawer.Content>
<Drawer.Grabber><Drawer.GrabberIndicator /></Drawer.Grabber>
<Drawer.Title>The {{ d.edge }} sheet</Drawer.Title>
<Drawer.Description>
The sheet rises from the {{ d.edge }} edge; drag it back where it came from.
</Drawer.Description>
<p>
The same anatomy serves every edge — the positioner seats it, the corners turn toward
the page, and the grabber rides the leading edge on the side sheets.
</p>
<Drawer.CloseTrigger>
<Icon :glyph="x" />
</Drawer.CloseTrigger>
</Drawer.Content>
</Drawer.Positioner>
</Teleport>
</Drawer.Root>
</div>
</template>
#Props
#Backdrop
A styled part — no props of its own; it takes the anatomy's shared styling.
#CloseTrigger
A styled part — no props of its own; it takes the anatomy's shared styling.
#Content
A styled part — no props of its own; it takes the anatomy's shared styling.
#Description
A styled part — no props of its own; it takes the anatomy's shared styling.
#GrabberIndicator
A styled part — no props of its own; it takes the anatomy's shared styling.
#Grabber
A styled part — no props of its own; it takes the anatomy's shared styling.
#IndentBackground
A styled part — no props of its own; it takes the anatomy's shared styling.
#Indent
A styled part — no props of its own; it takes the anatomy's shared styling.
#Positioner
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
closeOnEscape | boolean | true | Whether to close the drawer when the escape key is pressed. |
closeOnInteractOutside | boolean | true | Whether to close the drawer when the outside is clicked. |
closeThreshold | number | 0.25 | The threshold distance for dismissing the drawer. |
defaultOpen | boolean | The initial open state of the drawer. | |
defaultSnapPoint | drawer.SnapPoint | null | 1 | The default snap point of the drawer. |
defaultTriggerValue | string | null | The initial trigger value when rendered. Use when you don't need to control the trigger value. | |
finalFocusEl | () => HTMLElement | null | Element to receive focus when the sheet is closed. | |
id | string | The unique identifier of the machine. | |
ids | Partial<{ backdrop: string; positioner: string; content: string; title: string; trigger: string; grabber: string; grabberIndicator: string; closeTrigger: string; }> | The ids of the elements in the drawer. Useful for composition. | |
initialFocusEl | () => HTMLElement | null | Element to receive focus when the sheet is opened. | |
modal | boolean | true | Whether to prevent pointer interaction outside the element and hide all content below it. |
open | boolean | Whether the drawer is open. | |
preventDragOnScroll | boolean | true | Whether to prevent dragging on scrollable elements. |
preventScroll | boolean | true | Whether to prevent scrolling behind the sheet when it's opened |
restoreFocus | boolean | Whether to restore focus to the element that had focus before the sheet was opened. | |
role | 'dialog' | 'alertdialog' | "dialog" | The sheet's role |
snapPoint | drawer.SnapPoint | null | The currently active snap point. | |
snapPoints | (number | string)[] | [1] | The snap points of the drawer. |
snapToSequentialPoints | boolean | false | Whether the drawer should snap to sequential points when swiping. |
swipeDirection | drawer.SwipeDirection | "down" | The direction in which the drawer can be swiped. |
swipeVelocityThreshold | number | 700 | The threshold velocity (in pixels/s) for closing the drawer. |
trapFocus | boolean | true | Whether to trap focus inside the sheet when it's opened. |
triggerValue | string | null | The value of the trigger that currently open the drawer |
#Stack
A styled part — no props of its own; it takes the anatomy's shared styling.
#SwipeArea
A styled part — no props of its own; it takes the anatomy's shared styling.
#Title
A styled part — no props of its own; it takes the anatomy's shared styling.
#Trigger
A styled part — no props of its own; it takes the anatomy's shared styling.