Drawer
A panel that slides in from the side, often used for filters, details, and similar scenarios.
Basic usage
Right drawer
Panel content sliding in from the right; click the mask, the close button, or press Esc to close.
Left drawer
Left drawer
Status: All
Category: All
Sort: Created time
Disable mask close
no-mask-close prevents closing the drawer by clicking the mask (other close paths remain).
no-mask-close
Clicking the mask won't close it; use ✕ / Esc or the footer buttons.
Controlled visibility
visible is a controlled attribute: the host (button/JS) sets or removes it, and the component never restores it automatically; after closing, listen for oas-ok / oas-close and remove visible.
Controlled visibility (visible)
External buttons set / remove visible to control visibility without relying on the footer buttons.
No footer buttons
No footer buttons
The footer action area is hidden; only ✕ and Esc remain as close entries.
Event feedback
Event feedback
Click "OK" or "Cancel" and watch the message at the top-right.
Custom width
Custom width
Specify the drawer width via the width attribute, supporting px or percentages (e.g. 50%); on narrow screens it is constrained by max-width: 90vw.
Size presets
Size presets
small tier: 256px, suited for auxiliary info on narrow screens.
large tier: 736px, suited for complex forms or detail scenarios.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
no-footer | Hide footer action buttons | boolean | — |
no-mask-close | Disable closing on mask click | boolean | — |
placement | Slide direction | string | right |
size | Preset size or a concrete value: small (256px) / medium (378px) / large (736px), or write directly like 512px, 40% | — | — |
title | Title text | string | — |
visible | Whether shown | boolean | — |
width | Drawer width (px or percentage), takes precedence over size | — | — |
Events
| Event | Description |
|---|---|
oas-close | Close: cancel button / ✕ / mask click / Esc |
oas-ok | Clicked "OK" |
Slots
| Name | Description |
|---|---|
| default | — |
role="dialog" + aria-modal="true"; focus moves to the close button on open and is restored on close.