ODrawer
ODrawer is a modal dialog presented as a panel from the start or end edge of the viewport.
Usage
Step by step
- Import
ODrawerfromooko-ui/drawerandOPoppableFooterfromooko-ui/poppable. - Bind
v-model:openand provide a title oraria-label. - Put actions in a nested component with
OPoppableFooter; it teleports them to the sticky drawer footer, which is translucent and blurred so scrolled content shows faintly behind it. Setplacementtostartwhen the drawer should enter from the opposite edge.
Example
The rendered example and its source come from the same Vue single-file component.
Interactive playground
Change the edge and overlay behavior, then open the drawer.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls whether the drawer is in the poppable stack. |
title | string | undefined | Title rendered in the drawer header. |
ariaLabel | string | "Drawer" | Accessible name used when no title is supplied. |
placement | ODrawerPlacement | "end" | Side from which the drawer enters. Defaults to end. |
overlay | boolean | true | Displays the page overlay. Defaults to true. |
closeOnOverlayClick | boolean | true | Closes when the overlay is clicked. Defaults to true. |
closeOnEscape | boolean | true | Closes when Escape is pressed. Defaults to true. |
showClose | boolean | true | Displays the header close button. Defaults to true. |
closeLabel | string | "Close drawer" | Accessible label of the header close button. |
glass | boolean | false | Uses a translucent, blurred panel with a thin border, a softer overlay, and a footer without its band. Defaults to the app's glass option. |
Events
| Event | Payload | Description |
|---|---|---|
update:open | boolean | Requests a change to the open state. |
close | OokoPoppableCloseOptions | Emitted after the drawer requests to close. |
Slots
| Slot | Props | Description |
|---|---|---|
header | none | Replaces the header title. Supply aria-label when it does not provide an accessible name. |
default | none | Provides the drawer content. |
CSS custom properties
| Custom property | Default | Description |
|---|---|---|
--o-drawer-width | 28rem | Sets the inline size of drawers. |
--o-drawer-inset | var(--o-space-4) | Sets the gap between the drawer and the viewport edges; 0 attaches it to the edge at full height. |
--o-drawer-background | var(--o-poppable-background) | Sets the drawer panel background. |
--o-drawer-border | 1px solid var(--o-poppable-border-color) | Sets the drawer panel border shorthand. |
--o-drawer-border-radius | var(--o-radius-overlay) | Sets the drawer panel corner radius. |
--o-drawer-overlay-background | var(--o-background-overlay) | Sets the background of the overlay behind the drawer. |
--o-drawer-overlay-backdrop-filter | none | Sets the filter applied to the page behind the drawer overlay, such as blur(0.25rem). |
--o-drawer-glass-background | var(--o-background-glass) | Sets the translucent panel and footer background of a glass drawer. |
--o-drawer-glass-border | 1px solid var(--o-border-glass) | Sets the panel border shorthand of a glass drawer. |
--o-drawer-glass-backdrop-filter | var(--o-backdrop-filter-glass) | Sets the filter applied to the content behind a glass drawer panel. |
--o-drawer-glass-overlay-background | color-mix(in srgb, var(--o-background-overlay) 40%, transparent) | Sets the softer overlay background behind a glass drawer. |
--o-drawer-glass-overlay-backdrop-filter | none | Sets the filter applied to the page behind the overlay of a glass drawer, such as blur(0.375rem). |
Override example
A detached drawer with a light, blurred overlay, so the page stays readable behind it:
:root {
--o-drawer-width: 32rem;
--o-drawer-background: var(--o-background-neutral-subtle);
--o-drawer-border: 1px solid var(--o-border-neutral-lighter);
--o-drawer-border-radius: var(--o-radius-surface);
--o-drawer-overlay-background: color-mix(in srgb, var(--o-background-overlay) 40%, transparent);
--o-drawer-overlay-backdrop-filter: blur(0.25rem);
}Accessibility
The drawer is a modal dialog with focus management identical to ODialog: it traps Tab navigation, supports Escape, and restores focus when it closes. Its title or aria-label supplies the accessible name.
Behavior and edge cases
placement defaults to end. The drawer floats --o-drawer-inset (one spacing step) away from each viewport edge and uses the same rounded corners as a dialog. Set --o-drawer-inset: 0 and --o-drawer-border-radius: 0 to attach it to the edge at full height; its maximum height follows the inset. Overlay, overlay-click dismissal, Escape dismissal, and the close button all default to enabled. Drawers slide from their selected edge while the overlay fades; reduced-motion users receive no transition. Drawers share one LIFO poppable stack with dialogs, so a dialog opened from a drawer keeps the drawer visible, inert, under its overlay until the dialog closes.
glass gives the drawer the same treatment as a glass dialog: a translucent, blurred panel with a thin border over a softer overlay, and a footer that keeps only its light tint. Outside glass, --o-drawer-footer-background sets the footer apart with a light tint over the drawer surface rather than a rule. The --o-drawer-glass-* properties tune it, including --o-drawer-glass-overlay-backdrop-filter to blur the page. It follows the app's glass option unless set on the drawer.