Drawer
A panel that slides in from an edge, built on the native <dialog>. Temporary (default) is modal with a backdrop; persistent is non-modal.
Placements
html
| 1 | <nana-drawer id="d" placement="end"> |
| 2 | <span slot="header">Filters</span> |
| 3 | <p>Drawer body…</p> |
| 4 | <nana-button slot="footer" variant="primary" onclick="d.close()">Done</nana-button> |
| 5 | </nana-drawer> |
| 6 | <nana-button onclick="d.show()">Open</nana-button> |
Import
ts
| 1 | import "@nana-tec/ui-components/drawer"; |
Props
| Attribute | Type | Default |
|---|---|---|
open | boolean | false |
placement | start | end | top | bottom | end |
persistent | boolean | false |
no-backdrop-close | boolean | false |
no-escape-close | boolean | false |
Methods: show() / close(). Events: nana-open / nana-close.
Slides in from the start edge. Click the backdrop or press Escape to close.
Slides in from the end edge. Click the backdrop or press Escape to close.
Slides in from the top edge. Click the backdrop or press Escape to close.
Slides in from the bottom edge. Click the backdrop or press Escape to close.
Non-modal — no backdrop, doesn't block the page.