@duskmoon-dev/el-bottom-sheet (日语)
用 Web 组件构建的移动底页组件 .
安装
bun add @duskmoon-dev/el-bottom-sheet
使用量
自动注册
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>
手工登记
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);
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
open | boolean | false | 工作表是否打开 |
modal | boolean | true | 显示背景覆盖 |
persistent | boolean | false | 防止在背景下关闭 |
snap-points | string | - 说吧 | 坐标点(例如"25,50,100") |
槽数
| 槽 | 说明 |
|---|
| (默认) | 工作表内容 |
header | 工作表页眉 |
CSS 组件
| 编 | 说明 |
|---|
sheet | 工作表容器 |
backdrop | 背景叠加 |
handle | 拖把 |
content | 内容包装 |
header | 标题部分 |
活动
| 活动 | 细节 | 说明 |
|---|
open | - 说吧 | 工作表打开时已开火 |
close | - 说吧 | 工作表关闭时被解除 |
snap | { point } | 当工作表按下点数时开火 |
实例
基础
<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>
带坐标点
<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>
持久性(不可解除)
<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>
无后放
<el-dm-bottom-sheet modal="false">
Content without backdrop
</el-dm-bottom-sheet>
行动表模式
<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>
程序控制
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 + '%');
});
许可证
麻省理工学院