@duskmoon-dev/el-bottom-sheet
A mobile bottom sheet component built with Web Components.
Installation
bun add @duskmoon-dev/el-bottom-sheet
Usage
Auto-Register
import '@duskmoon-dev/el-bottom-sheet/register';
<el-dm-bottom-sheet id="sheet">
<span slot="header">Sheet Title</span>
<p>Sheet content goes here.</p>
</el-dm-bottom-sheet>
Manual Registration
import { ElDmBottomSheet, register } from '@duskmoon-dev/el-bottom-sheet';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-bottom-sheet', ElDmBottomSheet);
Attributes
| Attribute | Type | Default | Description |
|---|
open | boolean | false | Whether the sheet is open |
modal | boolean | true | Show backdrop overlay |
persistent | boolean | false | Prevent closing on backdrop click |
snap-points | string | - | Snap points (e.g., "25,50,100") |
Slots
| Slot | Description |
|---|
| (default) | Sheet content |
header | Sheet header |
CSS Parts
| Part | Description |
|---|
sheet | The sheet container |
backdrop | The backdrop overlay |
handle | The drag handle |
content | The content wrapper |
header | The header section |
Events
| Event | Detail | Description |
|---|
open | - | Fired when sheet opens |
close | - | Fired when sheet closes |
snap | { point } | Fired when sheet snaps to point |
Examples
Basic
<el-dm-button onclick="document.querySelector('#sheet').open = true">
Open Sheet
</el-dm-button>
<el-dm-bottom-sheet id="sheet">
<span slot="header">Options</span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</el-dm-bottom-sheet>
With Snap Points
<el-dm-bottom-sheet snap-points="25,50,100">
<span slot="header">Draggable Sheet</span>
<p>Drag up or down to snap to different heights.</p>
</el-dm-bottom-sheet>
Persistent (Non-Dismissible)
<el-dm-bottom-sheet persistent>
<span slot="header">Required Action</span>
<p>You must complete this action.</p>
<el-dm-button onclick="this.closest('el-dm-bottom-sheet').open = false">
Done
</el-dm-button>
</el-dm-bottom-sheet>
Without Backdrop
<el-dm-bottom-sheet modal="false">
Content without backdrop
</el-dm-bottom-sheet>
Action Sheet Pattern
<el-dm-bottom-sheet id="actions">
<span slot="header">Share</span>
<div class="action-list">
<button>Copy Link</button>
<button>Email</button>
<button>Twitter</button>
<button>Facebook</button>
</div>
</el-dm-bottom-sheet>
Programmatic Control
const sheet = document.querySelector('el-dm-bottom-sheet');
// Open
sheet.open = true;
// Close
sheet.open = false;
// Listen for events
sheet.addEventListener('close', () => {
console.log('Sheet closed');
});
sheet.addEventListener('snap', (e) => {
console.log('Snapped to:', e.detail.point + '%');
});
License
MIT