@duskmoon-dev/el-sliver (日语)
用 Web 组件构建的自定义范围滑动组件 .
安装
bun add @duskmoon-dev/el-slider
使用量
自动注册
import '@duskmoon-dev/el-slider/register';
<el-dm-slider value="50" min="0" max="100"></el-dm-slider>
手工登记
import { ElDmSlider, register } from '@duskmoon-dev/el-slider';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-slider', ElDmSlider);
大小
| 大小 | 说明 |
|---|
sm | 小滑块 |
md | 中滑块( 默认) |
lg | 大滑块 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
value | number | 0 | 现值 |
min | number | 0 | 最低价值 |
max | number | 100 | 最大值 |
step | number | 1 | 职级递增 |
disabled | boolean | false | 禁用滑动器 |
size | string | 'md' | 大小变体 : sm, (中文(简体) ), md, (中文(简体) ), lg |
color | string | 'primary' | 颜色变体 |
show-value | boolean | false | 显示当前值 |
CSS 组件
| 编 | 说明 |
|---|
slider | 主滑动容器 |
track | 轨道/铁路 |
thumb | 可拖动的拇指 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { value: number } | 当值变化时被解除(在发布时) |
input | { value: number } | 拖曳时被发射 |
实例
基础
<el-dm-slider></el-dm-slider>
有范围
<el-dm-slider min="0" max="100" value="25"></el-dm-slider>
与步骤
<el-dm-slider min="0" max="100" step="10"></el-dm-slider>
显示值
<el-dm-slider show-value></el-dm-slider>
大小
<el-dm-slider size="sm"></el-dm-slider>
<el-dm-slider size="md"></el-dm-slider>
<el-dm-slider size="lg"></el-dm-slider>
已禁用
<el-dm-slider disabled value="50"></el-dm-slider>
许可证
麻省理工学院