uxcore-pickable
TL;DR
uxcore-pickable ui component for react
setup develop environment
$ git clone https://github.com/uxcore/uxcore-pickable$ cd uxcore-pickable$ npm install$ gulp server
Usage
const classnames = ; const Pickable = ;const Item = Pickable; Component { superprops; thisstate = value: 1 } { this } { let items = text: '条件一' value: 1 num: 15 text: '条件二' value: 2 num: 20 text: '条件三' value: 3 disable: true ; return <div> <div> <Pickable onChange=thishandleChange value=thisstatevalue> items </Pickable> </div> <div> <Pickable onChange=thishandleChange value=thisstatevalue type="simple"> items </Pickable> </div> </div>; }; moduleexports = Demo;
demo
http://uxco.re/components/pickable/
API
- values(): 获得选中的值
Props
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
prefixCls | string | optional | kuma-pickable | 类名前缀,不使用 kuma 主题时使用 |
className | string | required | - | 增加额外的class |
onChange | func(value, changedKeys) | optional | - | 选中情况变化时触发,返回选中的项,以及目前发生变动的值 |
multiple | bool | optional | true | 是否多选 |
max | number | optional | 99 | 最大显示的数字,超过 max,显示 max+,2.0 版本后此项废弃,改为传入 children 时实现。 |
type | string | optional | normal | 样式风格,可选值为 normal , simple , hook , simpleHook |
enableFold | bool | optional | false | 是否启用折行后自动折叠, 3.0 版本后支持 |
defaultfoldItems | bool | optional | true | 是否在折行的情况下默认折叠, 3.0 版本后支持 |
maxLines | number | optonal | 1 | 超过几行的情况下使用折叠, 3.0 版本后支持 |
locale | string | optional | zh-cn | 国际化,zh-cn/en-us, 3.0 版本后支持 |
simpleValueInSingleMode | bool | optional | false | 单选时,输出和接收的值变成简单的值类型,而非数组,从 [1] 变成 1 |
Item Props
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
value | string/number | required | - | 该 Item 对应的值 |
disabled | boolean | optional | false | 是否禁用 |
number | number | optional | - | number 有值时会显示对应的值,2.0 版本后此项废弃,改为传入 children 时实现。 |
max | number | optional | 99 | 最大显示的数字,超过 max,显示 max+,2.0 版本后此项废弃,改为传入 children 时实现。 |