@duskmoon-dev/el-aert (日语)
一个自定义的提醒组件, 用于显示用 Web 组件构建的信件 .
安装
bun add @duskmoon-dev/el-alert
使用量
自动注册
import '@duskmoon-dev/el-alert/register';
<el-dm-alert type="success">Operation completed successfully!</el-dm-alert>
手工登记
import { ElDmAlert, register } from '@duskmoon-dev/el-alert';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-alert', ElDmAlert);
类型
| 类型 | 说明 |
|---|
info | 信息消息( 默认) |
success | 成功的消息 |
warning | 警告消息 |
error | 错误消息 |
备选案文
| 备选案文 | 说明 |
|---|
filled | 已填充的背景( 默认) |
outlined | 外观样式 |
soft | 软/细背景 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
type | string | 'info' | 警告类型 : info, (中文(简体) ), success, (中文(简体) ), warning, (中文(简体) ), error |
variant | string | 'filled' | 样式变体 : filled, (中文(简体) ), outlined, (中文(简体) ), soft |
dismissible | boolean | false | 显示删除按钮 |
compact | boolean | false | 压缩显示模式 |
title | string | '' | 提醒标题 |
槽数
| 槽 | 说明 |
|---|
| (默认) | 提醒内容 |
icon | 自定义图标 |
actions | 动作按钮 |
CSS 组件
| 编 | 说明 |
|---|
alert | 主警报容器 |
icon | 图标容器 |
content | 内容包装 |
title | 标题要素 |
close | 关闭按钮 |
活动
| 活动 | 细节 | 说明 |
|---|
dismiss | - 说吧 | 当警报解除时被解除 |
实例
基本类型
<el-dm-alert type="info">This is an info alert.</el-dm-alert>
<el-dm-alert type="success">This is a success alert.</el-dm-alert>
<el-dm-alert type="warning">This is a warning alert.</el-dm-alert>
<el-dm-alert type="error">This is an error alert.</el-dm-alert>
有标题
<el-dm-alert type="success" title="Success!">
Your changes have been saved.
</el-dm-alert>
开除
<el-dm-alert type="info" dismissible>
Click the X to dismiss this alert.
</el-dm-alert>
备选案文
<el-dm-alert type="info" variant="filled">Filled</el-dm-alert>
<el-dm-alert type="info" variant="outlined">Outlined</el-dm-alert>
<el-dm-alert type="info" variant="soft">Soft</el-dm-alert>
压缩
<el-dm-alert type="info" compact>Compact alert</el-dm-alert>
有动作
<el-dm-alert type="warning" dismissible>
Your session is about to expire.
<div slot="actions">
<el-dm-button size="sm">Extend</el-dm-button>
</div>
</el-dm-alert>
许可证
麻省理工学院