复选框和单选框
复选框(checkbox)允许用户选择多个选项,不同于 <select>
,这些选项是直接展示的。为 <input type="checkbox">
设置 disabled 属性来应用禁用样式,如果为 .checkbox
添加 disabled
类,则整个复选框包括文字部分都会应用禁用样式。将多个复选框堆叠形成一个复选框组。
基本使用
复选框
单选框列表
单选框通常多个一起使用组成列表,将多个单选框放在 .check-list
中即可。
复选框列表
复选框也支持多个一起使用组成列表,将多个复选框放在 .check-list
中即可。
不包含文字样式
复选框
单选框
内联形式
为让多个复选框或单选框内联显示,可以将他们放置在一个 .check-list-inline
中。
内联多选框
内联单选框
内联间距
可以通过工具类 gap-*
来设置内联的复选框和单选框间的间距。
高级外观
高级外观的多选框和单选框使用自定义的外观代替原生外观,在所有浏览器都具有一致的体验。
高级外观的复选框
高级外观的单选框
无 <input>
选择框
高级外观还可以不使用 <input>
元素,在此种情况下,为 .checkbox-primary
或 .radio-primary
添加 .checked
类标记为选中状态,通过 focus
类来标记激活状态,用户无法通过点击来切换选中状态,但可以通过程序手动添加或移除 .checked
来更改选中状态。
设置高级外观颜色
通过设置 CSS 变量 --checkbox-color
可以设置高级外观颜色。
CSS 类
单选框和复选框提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
checkbox | 实体类 | 复选框组件 |
radio | 实体类 | 单选框组件 |
check-list | 实体类 | 复选框或单选框列表组件 |
check-list-inline | 实体类 | 复选框或单选框内联列表组件 |
checkbox-primary | 实体类 | 高级外观的复选框组件 |
radio-primary | 实体类 | 高级外观的单选框组件 |
checked | 修饰类 | 强制使用选中外观 |
focus | 修饰类 | 强制使用激活外观 |
disabled | 修饰类 | 强制使用禁用外观 |
indeterminate | 修饰类 | 强制使用 Indeterminate 外观 |
CSS 变量
单选框和复选框提供了如下 CSS 变量:
CSS 变量名 | 作用 |
---|---|
--checkbox-size | 复选框或单选框大小,仅当使用高级外观时有效 |
--checkbox-color | 复选框或单选框颜色,仅当使用高级外观时有效 |