开发指南
何时使用
复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项,你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项,不要用复选框,使用开/关切换。
复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项,你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项,不要用复选框,使用开/关切换。
使用 Checkbox
渲染的基本组件。
使用 <Checkbox.Group>
渲染 <Checkbox>
分组。
通过使用 indeterminate
来渲染中间状态的组件。
使用 CheckboxGroup
渲染的组,通过设置 value
属性可以让组件变成受限组件。
使用 CheckboxGroup
渲染的组,通过设置 defaultValue
属性可以让组件变成非受限组件。
使用 CheckboxGroup
,通过直接嵌套 Checkbox
组件来渲染的组。
通过aria-label
对Checkbox
组件进行描述。关于键盘操作请参考ARIA and KeyBoard
。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
id | checkbox id, 挂载在 input 上 | String | - |
size | checkbox 尺寸,有 large,medium 两种选择 | String | 'medium' |
checked | 选中状态 | Boolean | - |
defaultChecked | 默认选中状态 | Boolean | false |
disabled | 禁用 | Boolean | - |
label | 通过属性配置 label, | ReactNode | - |
indeterminate | Checkbox 的中间状态,只会影响到 Checkbox 的样式,并不影响其 checked 属性 | Boolean | - |
defaultIndeterminate | Checkbox 的默认中间态,只会影响到 Checkbox 的样式,并不影响其 checked 属性 | Boolean | false |
onChange | 状态变化时触发的事件 签名: Function(checked: Boolean, e: Event) => void 参数: checked: {Boolean} 是否选中 e: {Event} Dom 事件对象 | Function | func.noop |
onMouseEnter | 鼠标进入 enter 事件 签名: Function(e: Event) => void 参数: e: {Event} Dom 事件对象 | Function | func.noop |
onMouseLeave | 鼠标离开 Leave 事件 签名: Function(e: Event) => void 参数: e: {Event} Dom 事件对象 | Function | func.noop |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
disabled | 整体禁用 | Boolean | - |
size | group 中 checkbox 的尺寸,有 large,medium 两种选择,当使用 dataSource 时生效 | String | 'medium' |
dataSource | 可选项列表, 数据项可为 String 或者 Object, 如 ['apple', 'pear', 'orange'] 或者 [{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}] | Array<any> | [] |
value | 被选中的值列表 | Array/String/Number | - |
defaultValue | 默认被选中的值列表 | Array/String/Number | - |
children | 通过子元素方式设置内部 checkbox | Array<ReactElement> | - |
onChange | 选中值改变时的事件 签名: Function(value: Array, e: Event) => void 参数: value: {Array} 选中项列表 e: {Event} Dom 事件对象 | Function | () => {} |
itemDirection | 子项目的排列方式 - hoz: 水平排列 (default) - ver: 垂直排列 可选值: 'hoz', 'ver' | Enum | 'hoz' |
按键 | 说明 |
---|---|
SPACE | 选择或取消当前项 |