开关

基本使用

与单选框和复选框的高级外观一样，通过 .switch 类来启用开关外观。

深色模式

被禁用

开关颜色

通过设置 CSS 变量 --checkbox-color 可以设置高级外观颜色。

选项 1

选项 2

选项 3

开关列表

垂直列表

通过将多个开关放置在 .check-list 中，可以实现一个开关列表：

选项 1

选项 2

选项 3

内联列表

通过将多个开关放置在 .check-list 中，可以实现一个开关内联列表：

选项 1

选项 2

选项 3

列表联动

通过开关内部使用的 input[type="checkbox"] 更换为 input[type="radio"]，并指定为相同的 name 属性，即可实现多个开关单选联动：

选项 1

选项 2

选项 3

CSS 类

开关提供了如下 CSS 类：

类	类型	作用
switch	实体类	开关组件
check-list	实体类	开关列表组件
check-list-inline	实体类	开关内联列表组件
checked	修饰类	强制使用选中外观
focus	修饰类	强制使用激活外观
disabled	修饰类	强制使用禁用外观

CSS 变量

单选框和复选框提供了如下 CSS 变量：

CSS 变量名	作用
--checkbox-color	开关颜色，仅当使用高级外观时有效