Checkbox 复选框
用于在多个选项中选择一个或多个。基于 BrConfigProvider 实现全局主题配置。
基础用法
Example
复选框组
使用 BrCheckboxGroup 来组合多个复选框。
Selected: [
"apple"
]
Example
不确定状态 (Indeterminate)
indeterminate 状态用于复选框既非选中也非未选中的状态（例如：全选/半选）。
Example
尺寸
我们提供了一组默认尺寸，你可以通过 size 属性来控制。
Example
禁用状态
Disabled Group
Example
主题定制
全局定制 (BrConfigProvider)
你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。
vue
<template>
<BrConfigProvider :theme="{ primary: '#10B981', radius: 0.5 }">
<BrCheckbox v-model="checked" label="Custom Theme" />
</BrConfigProvider>
</template>局部定制 (TailwindCSS)
你可以直接在包装器上使用 TailwindCSS 工具类覆盖样式。
vue
<template>
<BrCheckbox class="mb-4" label="Margin Bottom" />
</template>API
BrCheckbox
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | boolean | string | number | undefined | 绑定值 |
| value | string | number | boolean | undefined | 复选框的值（在组中使用） |
| disabled | boolean | false | 是否禁用 |
| indeterminate | boolean | false | 是否处于不确定状态 |
| label | string | undefined | 标签文本 |
| id | string | undefined | Input id |
| name | string | undefined | Input name |
| required | boolean | false | 是否必填 |
| error | boolean | false | 是否处于错误状态 |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default' | 'default' | 尺寸 |
Emits
| 名称 | 说明 | 参数 |
|---|---|---|
| update:modelValue | 更新模型值 | (value: boolean | string | number) |
| change | 变更事件 | (value: boolean | string | number) |
Slots
| 名称 | 说明 |
|---|---|
| default | 标签内容 |
| icon | 自定义图标插槽 |
BrCheckboxGroup
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | (string | number)[] | [] | 绑定值数组 |
| disabled | boolean | false | 是否禁用组内所有复选框 |
| size | 'sm' | 'default' | 'lg' | 'default' | 组内所有复选框的尺寸 |
| name | string | undefined | 所有复选框的 name 属性 |
Emits
| 名称 | 说明 | 参数 |
|---|---|---|
| update:modelValue | 更新模型值 | (value: (string | number)[]) |
| change | 变更事件 | (value: (string | number)[]) |