@duskmoon-dev/el-badge (日语)
用Web组件所建状态指标和计数器的徽章组件.
安装
bun add @duskmoon-dev/el-badge
使用量
自动注册
import '@duskmoon-dev/el-badge/register';
<el-dm-badge variant="success">Active</el-dm-badge>
手工登记
import { ElDmBadge, register } from '@duskmoon-dev/el-badge';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-badge', ElDmBadge);
备选案文
| 备选案文 | 说明 |
|---|
primary | 主颜色( 默认) |
secondary | 次要颜色 |
success | 成功/绿色 |
warning | 警告/黄 |
error | 错误/ 红色 |
info | 信息/蓝色 |
大小
| 大小 | 说明 |
|---|
sm | 小警徽( 警徽 ) |
md | 中度徽章( 默认) |
lg | 大型警徽 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
variant | string | 'primary' | 颜色变体 |
color | string | - 说吧 | 自定义颜色 |
size | string | 'md' | 大小 : sm, (中文(简体) ), md, (中文(简体) ), lg |
pill | boolean | false | 圆形药丸形状 |
dot | boolean | false | 显示为点指标 |
CSS 组件
实例
基本备选案文
<el-dm-badge variant="primary">Primary</el-dm-badge>
<el-dm-badge variant="secondary">Secondary</el-dm-badge>
<el-dm-badge variant="success">Success</el-dm-badge>
<el-dm-badge variant="warning">Warning</el-dm-badge>
<el-dm-badge variant="error">Error</el-dm-badge>
<el-dm-badge variant="info">Info</el-dm-badge>
大小
<el-dm-badge size="sm">Small</el-dm-badge>
<el-dm-badge size="md">Medium</el-dm-badge>
<el-dm-badge size="lg">Large</el-dm-badge>
药丸形状
<el-dm-badge pill>Pill Badge</el-dm-badge>
点指标
<el-dm-badge dot variant="success"></el-dm-badge>
<el-dm-badge dot variant="error"></el-dm-badge>
有数字
<el-dm-badge variant="error">5</el-dm-badge>
<el-dm-badge variant="primary">99+</el-dm-badge>
状况指标
<span>Online <el-dm-badge dot variant="success"></el-dm-badge></span>
<span>Offline <el-dm-badge dot variant="error"></el-dm-badge></span>
<span>Away <el-dm-badge dot variant="warning"></el-dm-badge></span>
许可证
麻省理工学院