@duskmoon-dev/el-dialog (日语)
基于本地 HTML 的模式对话框自定义元素 <dialog> 元素,样式为 @duskmoon-dev/core. HTML Invoker 命令被转发到内部本地对话框.
安装
bun add @duskmoon-dev/el-dialog
使用量
自动注册
import '@duskmoon-dev/el-dialog/register';
<button command="show-modal" commandfor="myDialog">Open Dialog</button>
<el-dm-dialog id="myDialog">
<span slot="header">Dialog Title</span>
<p>Dialog content goes here.</p>
<div slot="footer">
<el-dm-button variant="ghost">Cancel</el-dm-button>
<el-dm-button variant="primary">Confirm</el-dm-button>
</div>
</el-dm-dialog>
手工登记
import { ElDmDialog, register } from '@duskmoon-dev/el-dialog';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-dialog', ElDmDialog);
大小
| 大小 | 说明 |
|---|
sm | 小对话框 |
md | 介质对话框( 默认) |
lg | 大对话框 |
xl | 额外的大对话框 |
full | 全屏对话框 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
open | boolean | false | 对话框是否打开 |
size | string | 'md' | 大小 : sm, (中文(简体) ), md, (中文(简体) ), lg, (中文(简体) ), xl, (中文(简体) ), full |
dismissible | boolean | true | 允许通过背景/逃逸结束 |
no-dismiss | boolean | false | 防止因背景或逃逸而关闭 |
no-backdrop | boolean | false | 以非方式打开( O)show() 改为 showModal()(中文(简体) ) |
方法
| 方法 | 说明 |
|---|
show() | 打开对话框作为模式 |
showModal() | 别名 show() |
close() | 关闭对话框 |
toggle() | 切换对话框状态 |
槽数
| 槽 | 说明 |
|---|
| (默认) | 对话框内容 |
header | 对话框头/标题 |
footer | 包含动作的对话框页脚 |
CSS 组件
| 编 | 说明 |
|---|
dialog | 当地人 <dialog> 元素 |
box | 内部 dialog-box 集装箱 |
header | 标题部分 |
title | 标题包 |
body | 机构部分 |
footer | 脚下部分 |
close | 关闭按钮 |
这个背景是本地人 ::backdrop 伪相. 给它 --color-scrim。 。 。 .
活动
| 活动 | 细节 | 说明 |
|---|
open | - 说吧 | 对话框打开时已开火 |
close | - 说吧 | 关闭对话框时已开火 |
实例
基本对话框
<el-dm-button onclick="document.querySelector('#dialog').show()">
Open Dialog
</el-dm-button>
<el-dm-dialog id="dialog">
<span slot="header">Confirmation</span>
<p>Are you sure you want to proceed?</p>
<div slot="footer">
<el-dm-button variant="ghost" onclick="this.closest('el-dm-dialog').close()">
Cancel
</el-dm-button>
<el-dm-button variant="primary">
Confirm
</el-dm-button>
</div>
</el-dm-dialog>
大小
<el-dm-dialog size="sm">Small dialog</el-dm-dialog>
<el-dm-dialog size="md">Medium dialog</el-dm-dialog>
<el-dm-dialog size="lg">Large dialog</el-dm-dialog>
<el-dm-dialog size="xl">Extra large dialog</el-dm-dialog>
<el-dm-dialog size="full">Full-screen dialog</el-dm-dialog>
不可开除
<el-dm-dialog no-dismiss>
<span slot="header">Required Action</span>
<p>You must complete this action.</p>
<div slot="footer">
<el-dm-button variant="primary">Continue</el-dm-button>
</div>
</el-dm-dialog>
程序控制
const dialog = document.querySelector('el-dm-dialog');
dialog.show();
dialog.close();
dialog.addEventListener('close', () => {
console.log('Dialog closed');
});
许可证
麻省理工学院