Drawer
data-drawer since 0.1.0
A drawer is a dialog pinned to one edge of the screen, full height. It slides in from that edge, so the reader can see where it came from and where it goes back.
Basic
<button data-open="#message" data-size="sm">Open</button>
<dialog data-drawer="right" id="message">
<header><h3>Retry budget for atlas is too high</h3><button data-close data-variant="ghost" aria-label="Close">×</button></header>
<div data-stack>
<p><small>From</small> Dana Whitfield · 09:14</p>
<p>The gateway retries nine times before it gives up, so a slow shard turns into a flood. I would cap it at four and add a short wait between tries.</p>
</div>
<menu><li><button data-close data-toast="Reply saved as a draft">Reply</button></li><li><button data-close data-variant="line">Archive</button></li></menu>
</dialog>The values are left and right; everything else is the dialog you already know.
Notes
- It opens with
showModal(), so Escape, the backdrop and[data-close]all close it. - The slide takes 200 ms, through
transition: translateplus@starting-style;allow-discretesits inside the shorthand so the exit is not dropped. - The width is
min(24rem, 100%), so on a phone the drawer is the screen.