Negligible Participation Metric
    Wondering what’s next for npm?Check out our public roadmap! »

    uxcore-transfer

    0.4.4 • Public • Published

    uxcore-transfer


    TL;DR

    transfer ui component for react

    setup develop environment

    $ git clone https://github.com/uxcore/uxcore-transfer
    cd uxcore-transfer
    $ npm install
    $ npm run dev

    Usage

    let Transfer = require("uxcore-transfer");
    let mockData = [];
    let len = Math.random() * 10 + 40;
    for (let i = 0; i < len; i++) {
        mockData.push({
            name: '内容' + (i + 1),
            value: (i + 1),
            description: '内容' + (i + 1) + '的描述',
            chosen: Math.random() * 2 > 1,
            keywords: ['neirong' + (i + 1)], // used in search & location
            disabled: i > 15
        });
    }
    
    class TransferDemo extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                disable: false
            }
        }
    
        _handleChange(data) {
            console.log(data);
        }
    
        handleClick() {
            this.refs.transfer.selectItems([2, 3]);
        }
    
        handleClick2() {
            this.setState({
                disable: !this.state.disable
            })
        }
    
        render() {
            var me = this;
            return (
                <div>
                    <Transfer showSearch={true} disabled={me.state.disable} ref="transfer" data={mockData} onChange={me._handleChange.bind(me)}/>
                    <Button onClick={me.handleClick.bind(me)}>手动更改被选中的项</Button>
                    <Button onClick={me.handleClick2.bind(me)}>更改 mode</Button>
                </div>
            );
        }
    }
    
    

    demo

    http://uxcore.github.io/uxcore/components/transfer/

    API

    • selectItems(arr): 使对应 value 的变成高亮状态 (selected)。 参数:
      • arr Array 一个由 value 组成的数组。
    • reset(): 使 Transfer 回到与 data 对应的状态。

    Props

    参数 类型 必需 默认值 说明
    height number optional 220 transfer高度
    data array required - 用于初始化 transfer 的数据,格式见 Usage,其中 name 和 value 字段必有
    disabled boolean optional false 是否启用 disable 模式
    showSearch boolean optional true 是否显示搜索条
    searchPlaceholder string optional 定位输入内容
    leftTitle string optional '未选中的' 左侧标题
    rightTitle string optional '已选中的' 右侧标题
    onChange func optional noop 选中情况变化时触发,返回选中和未选中的项
    isAsc boolean optional false 是否让新穿梭的值排在尾部

    Install

    npm i uxcore-transfer

    DownloadsWeekly Downloads

    34

    Version

    0.4.4

    License

    MIT

    Unpacked Size

    57.1 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar