@duskmoon-dev/el-drawer (日语)
用 Web 组件创建的滑出抽屉组件 .
安装
bun add @duskmoon-dev/el-drawer
使用量
自动注册
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>
手工登记
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);
职位
| 职位 | 说明 |
|---|
left | 从左侧滑动( 默认) |
right | 从右边滑动 |
top | 从上方滑动 |
bottom | 从底部滑动 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
open | boolean | false | 抽屉是否打开 |
position | string | 'left' | 位置 : left, (中文(简体) ), right, (中文(简体) ), top, (中文(简体) ), bottom |
modal | boolean | true | 显示背景覆盖 |
width | string | '300px' | 抽取器宽度( 左/ 右) |
槽数
| 槽 | 说明 |
|---|
| (默认) | 绘图体内容 |
header | 抽取页眉 |
footer | 抽取页脚 |
CSS 组件
| 编 | 说明 |
|---|
drawer | 抽屉元素 |
backdrop | 背景叠加 |
content | 内容包装 |
header | 标题部分 |
body | 机构部分 |
footer | 脚下部分 |
活动
| 活动 | 细节 | 说明 |
|---|
open | - 说吧 | 抽屉打开时被炒了 |
close | - 说吧 | 抽屉关上时被炒了 |
实例
基础
<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>
职位
<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>
自定义宽度
<el-dm-drawer width="400px">
Wider drawer
</el-dm-drawer>
无后放
<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>
程序控制
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');
});
许可证
麻省理工学院