Drawer
A <dialog> variant that slides in from the edge
of the screen instead of appearing centered. It's built entirely
on top of the Dialog component,
just add the drawer class.
Default
Add the drawer class to a <dialog>.
By default it slides in from the right. Everything else, including
.showModal(), closedby, and
scroll-lock, works exactly like a regular dialog.
<button onclick="document.getElementById('my-drawer').showModal()">
Open drawer
</button>
<dialog id="my-drawer" class="drawer" closedby="any">
<article>
<p style="margin-bottom: 1rem">This is a drawer.</p>
<form method="dialog">
<button class="outlined">Close</button>
</form>
</article>
</dialog>Position
Use data-position to slide the drawer in from
left, right, top, or
bottom. It defaults to right when omitted.
<dialog class="drawer" data-position="left">...</dialog>
<dialog class="drawer" data-position="right">...</dialog>
<dialog class="drawer" data-position="top">...</dialog>
<dialog class="drawer" data-position="bottom">...</dialog>With header & footer
Use the card's <header> and
<footer> to pin controls to the top and bottom of
the drawer, same as inside a regular dialog.
<dialog class="drawer" closedby="any">
<article>
<header>
<strong>Filters</strong>
</header>
<p>Drawer content goes here.</p>
<footer>
<form method="dialog">
<button>Apply</button>
<button class="outlined">Cancel</button>
</form>
</footer>
</article>
</dialog>