@duskmoon-dev/el-进步
用 Web 组件构建的有各种样式的进度栏组件 .
安装
bun add @duskmoon-dev/el-progress
使用量
自动注册
import '@duskmoon-dev/el-progress/register';
<el-dm-progress value="50"></el-dm-progress>
手工登记
import { ElDmProgress, register } from '@duskmoon-dev/el-progress';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-progress', ElDmProgress);
大小
| 大小 | 说明 |
|---|
sm | 小型/ 最小进度栏 |
md | 中等进度栏( 默认) |
lg | 大/小进度栏 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
value | number | 0 | 现值 |
max | number | 100 | 最大值 |
color | string | 'primary' | 颜色变体 |
size | string | 'md' | 大小 : sm, (中文(简体) ), md, (中文(简体) ), lg |
indeterminate | boolean | false | 显示不确定状态 |
striped | boolean | false | 显示条纹图案 |
animated | boolean | false | 动画条纹 |
show-value | boolean | false | 显示值文本 |
CSS 组件
| 编 | 说明 |
|---|
progress | 进度容器 |
bar | 进度栏填充 |
value | 数值文本 |
实例
基础
<el-dm-progress value="50"></el-dm-progress>
有数值显示
<el-dm-progress value="75" show-value></el-dm-progress>
颜色
<el-dm-progress value="50" color="primary"></el-dm-progress>
<el-dm-progress value="50" color="success"></el-dm-progress>
<el-dm-progress value="50" color="warning"></el-dm-progress>
<el-dm-progress value="50" color="error"></el-dm-progress>
大小
<el-dm-progress value="50" size="sm"></el-dm-progress>
<el-dm-progress value="50" size="md"></el-dm-progress>
<el-dm-progress value="50" size="lg"></el-dm-progress>
不确定
<el-dm-progress indeterminate></el-dm-progress>
剥离
<el-dm-progress value="50" striped></el-dm-progress>
动画花纹
<el-dm-progress value="50" striped animated></el-dm-progress>
动态更新
const progress = document.querySelector('el-dm-progress');
let value = 0;
const interval = setInterval(() => {
value += 10;
progress.value = value;
if (value >= 100) clearInterval(interval);
}, 500);
许可证
麻省理工学院