uxcore-checkbox-group
TL;DR
uxcore-checkbox-group ui component for react ES5 support needed(like es5-shim)
setup develop environment
$ git clone https://github.com/uxcore/uxcore-checkbox-group$ cd uxcore-checkbox-group$ npm install$ gulp server
Usage
let classnames = ; let CheckboxGroup = ;let Item = CheckboxGroupItem Component { superprops; thisstate = value: "air" } { this } { return <div> <CheckboxGroup onChange=thishandleChange value=thisstatevalue> <Item text="天空天空天空" value="air" addon= <Popover overlay=<div>提示</div>> <i className='kuma-icon kuma-icon-caution' style=color: 'blue' fontSize: '12px' 'marginLeft': '3px' /> </Popover> /> <Item text="<b>大海大海大海</b>" value="sea"/> <Item text="陆地陆地陆地" value="land"/> <Item text="飞机飞机飞机" value="plane"/> <Item text="火车飞机飞机" value="train"/> </CheckboxGroup> </div> ; }; moduleexports = Demo;
demo
API
Props
CheckboxGroup
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
value | array | required | [] | 由 value 组成地数组,与 React 受限组件表现一致,选中项与 value 保持一致,数组中的值与 item 的 value 相对应 |
onChange | function | required | - | 与 React 受限组件表现一致,在 checkbox 群发生改变时触发,借此来更改 value |
disabled | boolean | optional | false | 是否为 disable 状态 |
CheckboxItem
通过 CheckboxGroup.Item 取得。
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
text | string | optinal | - | checkbox 后面跟着的说明文字 |
value | string | required | - | checkbox 对应的值 |
disabled | boolean | optional | - | Item 是否为 disable 状态,具有比 Group 更高的优先级 |
addons | jsx | optional | - | 显示在label后面的添加项,可以用作checkbox的tips |