@duskmoon-dev/el-drawer
A slide-out drawer component built with Web Components.
Installation
bun add @duskmoon-dev/el-drawer
Usage
Auto-Register
import '@duskmoon-dev/el-drawer/register';
<el-dm-drawer id="myDrawer">
<span slot="header">Drawer Title</span>
<p>Drawer content goes here.</p>
</el-dm-drawer>
Manual Registration
import { ElDmDrawer, register } from '@duskmoon-dev/el-drawer';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-drawer', ElDmDrawer);
Positions
| Position | Description |
|---|
left | Slide from left (default) |
right | Slide from right |
top | Slide from top |
bottom | Slide from bottom |
Attributes
| Attribute | Type | Default | Description |
|---|
open | boolean | false | Whether the drawer is open |
position | string | 'left' | Position: left, right, top, bottom |
modal | boolean | true | Show backdrop overlay |
width | string | '300px' | Drawer width (for left/right) |
Slots
| Slot | Description |
|---|
| (default) | Drawer body content |
header | Drawer header |
footer | Drawer footer |
CSS Parts
| Part | Description |
|---|
drawer | The drawer element |
backdrop | The backdrop overlay |
content | The content wrapper |
header | The header section |
body | The body section |
footer | The footer section |
Events
| Event | Detail | Description |
|---|
open | - | Fired when drawer opens |
close | - | Fired when drawer closes |
Examples
Basic
<el-dm-button onclick="document.querySelector('#drawer').open = true">
Open Drawer
</el-dm-button>
<el-dm-drawer id="drawer">
<span slot="header">Menu</span>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</el-dm-drawer>
Positions
<el-dm-drawer position="left">Left drawer</el-dm-drawer>
<el-dm-drawer position="right">Right drawer</el-dm-drawer>
<el-dm-drawer position="top">Top drawer</el-dm-drawer>
<el-dm-drawer position="bottom">Bottom drawer</el-dm-drawer>
Custom Width
<el-dm-drawer width="400px">
Wider drawer
</el-dm-drawer>
Without Backdrop
<el-dm-drawer modal="false">
No backdrop
</el-dm-drawer>
<el-dm-drawer>
<span slot="header">Settings</span>
<p>Drawer content</p>
<div slot="footer">
<el-dm-button variant="ghost">Cancel</el-dm-button>
<el-dm-button variant="primary">Save</el-dm-button>
</div>
</el-dm-drawer>
Programmatic Control
const drawer = document.querySelector('el-dm-drawer');
// Open
drawer.open = true;
// Close
drawer.open = false;
// Listen for events
drawer.addEventListener('close', () => {
console.log('Drawer closed');
});
License
MIT