Drawer
The Drawer is a native web component that opens a full-width drawer from the bottom edge of the screen, with a center handle, sliding up over a backdrop. Because it is built on the native dialog element, it gets focus trapping, ESC-to-close, and backdrop click for free. Use it for contextual actions, filters, or forms on smaller screens, where a bottom panel feels more natural than a centered modal.
Preview
<pura-button id="abrir-drawer">Open drawer</pura-button>
<pura-drawer id="drawer-exemplo" title="Filters">
<p>Refine the results using the options below.</p>
<pura-checkbox>In stock</pura-checkbox>
<pura-checkbox>Free shipping</pura-checkbox>
<div slot="footer">
<pura-button variant="ghost" id="cancelar-drawer">Cancel</pura-button>
<pura-button id="aplicar-drawer">Apply</pura-button>
</div>
</pura-drawer>
<script type="module">
const drawer = document.getElementById("drawer-exemplo");
document.getElementById("abrir-drawer").addEventListener("click", () => drawer.open());
document.getElementById("cancelar-drawer").addEventListener("click", () => drawer.close());
document.getElementById("aplicar-drawer").addEventListener("click", () => drawer.close());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls visibility. Present opens the drawer (showModal); removed closes it. Observed and reactive. |
title | string | "" | Title text in the header, used when the header slot is not filled. Read at render time. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/drawer.js"></script>import "./pura/lib/drawer.js";