@duskmoon-dev/el-switch (日语)
用 Web 组件构建的自定义切换切换组件 .
安装
bun add @duskmoon-dev/el-switch
使用量
自动注册
import '@duskmoon-dev/el-switch/register';
<el-dm-switch label="Enable notifications"></el-dm-switch>
手工登记
import { ElDmSwitch, register } from '@duskmoon-dev/el-switch';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-switch', ElDmSwitch);
大小
| 大小 | 说明 |
|---|
sm | 小开关 |
md | 中开关( 默认) |
lg | 大开关 |
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
value | boolean | false | 开关是否打开 |
disabled | boolean | false | 禁用开关 |
size | string | 'md' | 大小变体 : sm, (中文(简体) ), md, (中文(简体) ), lg |
color | string | 'primary' | 颜色变体 |
label | string | '' | 标签文本 |
label-position | string | 'end' | 标签位置 : start, (中文(简体) ), end |
name | string | '' | 窗体字段名称 |
CSS 组件
| 编 | 说明 |
|---|
switch | 主开关容器 |
track | 轨迹/背景 |
thumb | 拇指/指针 |
label | 标签元素 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { value: boolean } | 值变化时被解除 |
input | { value: boolean } | 交互时已发射 |
实例
基础
<el-dm-switch></el-dm-switch>
用标签
<el-dm-switch label="Dark mode"></el-dm-switch>
<el-dm-switch label="Notifications" label-position="start"></el-dm-switch>
大小
<el-dm-switch size="sm"></el-dm-switch>
<el-dm-switch size="md"></el-dm-switch>
<el-dm-switch size="lg"></el-dm-switch>
已禁用
<el-dm-switch disabled></el-dm-switch>
<el-dm-switch disabled value></el-dm-switch>
许可证
麻省理工学院