Sheet
Sheet is a native web component that displays a sliding panel over a modal backdrop, built on the native <dialog> element (with focus trapping, the ESC key, and backdrop included). Use it for forms, filters, details, or secondary navigation that should appear on top of the content without switching pages. The panel can slide in from the right (default), left, top, or bottom.
Preview
<pura-button id="abrir-sheet">Open panel</pura-button>
<pura-sheet id="meu-sheet" title="Edit profile" side="right">
<p>Update your information and click save when you're done.</p>
<pura-input label="Name" value="Andre"></pura-input>
<pura-input label="Email" value="andre@aex.partners"></pura-input>
<pura-button slot="footer" variant="ghost" id="cancelar-sheet">Cancel</pura-button>
<pura-button slot="footer" id="salvar-sheet">Save</pura-button>
</pura-sheet>
<script type="module">
const sheet = document.getElementById("meu-sheet");
document.getElementById("abrir-sheet").addEventListener("click", () => sheet.open());
document.getElementById("cancelar-sheet").addEventListener("click", () => sheet.close());
document.getElementById("salvar-sheet").addEventListener("click", () => sheet.close());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls visibility; present opens the panel via showModal(), absent closes it. |
side | string | right | Edge the panel originates from: right, left, top, or bottom. |
title | string | "" | Header text shown when the header slot is not used. |
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/sheet.js"></script>import "./pura/lib/sheet.js";