Checkbox
- category: UI
- chinese: 复选框组件
- type: UI 组件
何时使用
Checkbox 组件与 Switch 组件类似,只有开、关 2 种状态,但使用场景不同:
Switch 通常用于单个零散的配置项设置,而 Checkbox 通常用于某数据源中多项数据的选择。
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 大小 | string | medium( 可选 small) |
checked | 是否选中 | boolean | 无 |
defaultChecked | 默认选中 | boolean | false |
disabled | 是否禁用 | boolean | false |
onChange | 状态改变时的回调函数 | function(checked,e) | 无 |
type | 复选框类型 | string | normal(list,empty) |
touchStyle | 触摸区域样式 | object | {} |
ignoreContext | 忽略上层父级 context,当 radio.group 的子级存在非 group 模式的 radio 时需设置为 false | bool(false) |
Checkbox.Group
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dataSource | 数据源 | array | [] |
reverse | 翻转 label 与 checkbox 的渲染顺序 | bool | false |
value | 选中项目 | array | [] |
onChange | 状态改变时的回调函数 | function(checked,e) | 无 |
style | group 整个 container 上的样式 | Object | {} |
renderItem | 自定义 item 的渲染方式,可通过此方法扩大点击范围 | function | () |
groupItemStyle | 每个 item 的外层渲染样式 | object | {} |
labelStyle | 每个 item 的 label 文案样式 | object | {} |
受控用法与非受控用法
所有的输入、交互类组件都有受控用法和非受控用法。
- 受控用法: 组件状态受到外部传入的 props 影响,外部 props 改变,组件才改变,如下 demo :
{ super; thisstate = checked: true } { this;}//...{ return <Checkbox checked=thisstatechecked onChange=thischange/>}
- 非受控用法: 组件自身自由改变,并通过事件通知外部改变成了什么。如下 demo :
{ console;}//...{ return <Checkbox defaultChecked=true onChange=thischange/>}
demo 参考
扫码预览 ( 手淘、千牛、天猫等 )
使用方法
- 安装
// 切换到你的 rax 项目中npm i nuke-checkbox --save// 参考如下 demo 您可能还需要安装// npm i nuke-view nuke-page nuke-text --save
- 调用示例
/** @jsx createElement */;;;;;const themeOrange = '#ff6600';let App = { super; thisstate = checked: false ; } { console; } { this; } { return <Page title="Checkbox"> <PageIntro sub="普通样式" /> <View style=stylesdemo_item> <View style=stylesgroup_item> <Checkbox defaultChecked=true size="small" onChange=thisonChange /> <Text>苹果</Text> </View> <View style=stylesgroup_item> <Checkbox size="small" onChange=thisonChange /> <Text>梨</Text> </View> </View> <PageIntro sub="空心样式" /> <View style=stylesdemo_item> <View style=stylesgroup_item> <Checkbox defaultChecked=true type="empty" size="small" onChange=thisonChange /> <Text>苹果</Text> </View> <View style=stylesgroup_item> <Checkbox size="small" type="empty" onChange=thisonChange /> <Text>梨</Text> </View> </View> <PageIntro sub="list 样式" /> <View style=stylesdemo_item flexDirection: 'column' > <View style=stylesgroup_item> <Checkbox defaultChecked=true type="list" size="small" onChange=thisonChange /> <Text>浙江省杭州市余杭区</Text> </View> <View style=stylesgroup_item> <Checkbox size="small" type="list" onChange=thisonChange /> <Text>浙江省杭州市临安市</Text> </View> </View> <PageIntro main="自定义大小颜色" /> <View style=stylesdemo_item> <Checkbox style= width: '30rem' height: '30rem' fontSize: '20rem' defaultChecked=true size="small" checkedStyle= backgroundColor: themeOrange unCheckedStyle= backgroundColor: themeOrange onChange=thisonChange /> <Checkbox defaultChecked=true size="small" type="empty" checkedStyle= borderColor: themeOrange color: themeOrange unCheckedStyle= borderColor: themeOrange onChange=thisonChange /> <Checkbox defaultChecked=true size="small" type="list" checkedStyle= color: themeOrange onChange=thisonChange /> </View> </Page> ; }; const styles = demo_item: width: 750 marginTop: 30 backgroundColor: '#ffffff' flexDirection: 'row' alignItem: 'center' paddingLeft: 12 group_item: height: 104 flexDirection: 'row' borderBottomWidth: '2rem' borderBottomStyle: 'solid' borderBottomColor: '#F7F8FA' alignItems: 'center' ; ;