Skip to content

开关

基本使用

与单选框和复选框的高级外观一样,通过 .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开关颜色,仅当使用高级外观时有效