开关
基本使用
与单选框和复选框的高级外观一样,通过 .switch
类来启用开关外观。
开关颜色
通过设置 CSS 变量 --checkbox-color
可以设置高级外观颜色。
开关列表
垂直列表
通过将多个开关放置在 .check-list
中,可以实现一个开关列表:
内联列表
通过将多个开关放置在 .check-list
中,可以实现一个开关内联列表:
列表联动
通过开关内部使用的 input[type="checkbox"]
更换为 input[type="radio"]
,并指定为相同的 name
属性,即可实现多个开关单选联动:
CSS 类
开关提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
switch | 实体类 | 开关组件 |
check-list | 实体类 | 开关列表组件 |
check-list-inline | 实体类 | 开关内联列表组件 |
checked | 修饰类 | 强制使用选中外观 |
focus | 修饰类 | 强制使用激活外观 |
disabled | 修饰类 | 强制使用禁用外观 |
CSS 变量
单选框和复选框提供了如下 CSS 变量:
CSS 变量名 | 作用 |
---|---|
--checkbox-color | 开关颜色,仅当使用高级外观时有效 |