@rax-ui/checkbox
v1.0.0-beta.62
Published
Rax UI Checkbox
Downloads
16
Readme
display: ComponentName family: other
Checkbox
多选框
API
Props
Checkbox
| 名称 | 说明 | 类型 | 默认值 | | :------------- | :-------------------------------------- | :-------------- | :----- | | checked | 是否选中(受控模式) | bool | | | defaultChecked | 初始选中状态(非受控模式) | bool | | | disabled | 是否禁用 | bool | false | | indeterminate | 设置 indeterminate 状态,只负责样式控制 | | readOnly | 只读模式 | boolean | false | | style | 单选框的 style | object | {} | | className | 单选框的 className | string | | | children | Checkbox 的子元素,一般为右侧说明文案 | any | | | onChange | 改变时回调函数 | Function(value) | |
Checkbox Group
| 名称 | 说明 | 类型 | 默认值 |
| :----------- | :-------------------------------------------- | :--------------------- | :--------- |
| defaultValue | 初始选中的选项(非受控模式) | string[] | - |
| value | 指定选中的选项 | string[] | - |
| disabled | 是否禁用 | bool | false |
| readOnly | 只读模式 | boolean | false |
| direction | 排布方向 可选值:horiontal
,vertical
| enum | vertical
|
| data | 数据源 | CheckboxProps[] | |
| style | Checkbox Group 的 style | object | {} |
| className | Checkbox Group 的 className | string | |
| onChange | 改变时回调函数 | Function(checkedValue) | |
CSS API
Checkbox Group
| 名称 | 说明 | | :---------------------------- | :---------------------------------- | | checkbox--group | Checkbox Group 样式 | | checkbox--group__horizontal | Checkbox Group 水平布局时样式 | | checkbox--group_\vertical | Checkbox Group 垂直布局时样式 | | checkbox--group__item | Checkbox Group 中单个 Checkbox 样式 |
Checkbox
| 名称 | 说明 | | :------------------------------------------ | :---------------------------------- | | checkbox__container | Checkbox 盒子样式 | | checkbox__circle | 圆圈样式 | | checkbox--selected__circle | 选中状态的圆圈样式 | | checkbox--press__circle | 按下的圆圈样式 | | checkbox--selected--press__circle | 选中且按下状态的圆圈样式 | | checkbox--disabled__circle | 禁用状态的圆圈样式 | | checkbox--selected--disabled__circle | 选中、禁用状态的圆圈样式 | | checkbox--indeterminate--disabled__circle | indeterminate、禁用状态的圆圈样式 | | checkbox__icon | icon 样式 | | checkbox--selected__icon | 选中状态的 icon 样式 | | checkbox--selected--disabled__icon | 选中、禁用状态的 icon 样式 | | checkbox--indeterminate__icon | indeterminate 状态的 icon 样式 | | checkbox--indeterminate--disabled__icon | indeterminate、禁用状态的 icon 样式 | | checkbox__text | 文案样式 | | checkbox--selected__text | 选中状态的文案样式 | | checkbox--disabled__text | 禁用状态的文案样式 | | checkbox--indeterminate__text | indeterminate 状态的文案样式 | | checkbox--selected--disabled__text | 选中、禁用状态的文案样式 | | checkbox--indeterminate--disabled__text | indeterminate、 禁用状态的文案样式 |