Negligent Parachute Maintainers
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

uxcore-pickable

4.1.1 • Public • Published

uxcore-pickable Dependency Status devDependency Status

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 = require('classnames');
 
const Pickable = require('uxcore-pickable');
const {Item} = Pickable;
 
class Demo extends React.Component {
 
    constructor(props) {
        super(props);
        this.state = {
          value: [1]
        }
    }
 
    handleChange(value) {
      this.setState({
        value: value
      })
    }
 
    render() {
      let items = [{
        text: '条件一',
        value: 1,
        num: 15
      }, {
        text: '条件二',
        value: 2,
        num: 20
      }, {
        text: '条件三',
        value: 3,
        disable: true
      }];
      return <div>
        <div>
          <Pickable onChange={this.handleChange.bind(this)} value={this.state.value}>
            {items.map((item, index) => {
              return <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>
            })}
          </Pickable>
        </div>
        <div>
          <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type="simple">
            {items.map((item, index) => {
              return <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>
            })}
          </Pickable>
        </div>
      </div>;
    }
};
 
module.exports = 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 时实现。

install

npm i uxcore-pickable

Downloadsweekly downloads

29

version

4.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability