Gitee
Appearance
Checkbox Group 复选框
Checkbox 组件为不同使用场景提供了多种展示样式。
基础用法
只读
通过readonly 属性设置复选框的是否只读。默认为否。
禁用
通过disabled 属性设置复选框的是否禁用。默认为否。
复选组
复选组-横向排列
通过direction 属性设置复选组的排列方向。
复选组-按钮模式
Checkbox属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label | string | -- | 标签名 |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 只读 |
| shape | CheckboxShape | square | 选择框形状 |
| type | CheckboxType | check | 选择框类型 |
| labelLimit | number | -- | 标签最大长度 |
Checkbox事件
| 事件名 | 类型 | 说明 |
|---|---|---|
| update:modelValue | EventEmitter<boolean> | 值变化事件 |
| change | EventEmitter<boolean> | 值变化事件 |
CheckboxGroup属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | string | string[] | -- | 绑定值 |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 只读 |
| shape | CheckboxShape | square | 复选组形状 |
| type | CheckboxType | check | 复选组类型 |
| direction | string | vertical | 复选组排列方向 |
| items | CheckboxItem[] | -- | 支持使用对象动态渲染复选框 |
| valueField | string | value | 动态渲染复选框时数组对象值字段 |
| textField | string | text | 动态渲染复选框时数组对象文本字段 |
CheckboxGroup事件
| 事件名 | 类型 | 说明 |
|---|---|---|
| update:modelValue | EventEmitter<string | any[]> | 值变化事件 |
CheckboxGroupItem属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | string | number | -- | 标识，配合CheckboxGroup时使用 |
| label | string | -- | 标签名 |
| disabled | boolean | false | 禁用 |
| readonly | boolean | false | 只读 |
| shape | CheckboxShape | square | 选择框形状 |
| type | CheckboxType | check | 选择框类型 |
| labelLimit | number | -- | 标签最大长度 |
CheckboxGroupItem事件
| 事件名 | 类型 | 说明 |
|---|---|---|
| update:modelValue | EventEmitter<boolean> | 值变化事件 |
CSS 变量
css
:root {
--fm-checkbox-color: var(--fm-text-color);
--fm-checkbox-font-size: var(--fm-font-size);
--fm-checkbox-icon-color: var(--fm-text-color-light);
--fm-checkbox-icon-background: var(--fm-background-white);
--fm-checkbox-icon-radius: var(--fm-radius-md);
--fm-checkbox-checked-icon-color: var(--fm-primary-color);
--fm-checkbox-button-background: var(--fm-gray-2);
--fm-checkbox-disabled-color: var(--fm-disabled-color);
--fm-checkbox-disabled-icon-color: var(--fm-gray-1);
}