0.4.4 • Published 6 years ago
uxcore-transfer v0.4.4
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 | 是否让新穿梭的值排在尾部 |
0.4.4
6 years ago
0.4.3
7 years ago
0.4.2
7 years ago
0.4.1
7 years ago
0.4.0
7 years ago
0.3.15
7 years ago
0.3.14
8 years ago
0.3.13
8 years ago
0.3.12
8 years ago
0.3.11
8 years ago
0.3.10
8 years ago
0.3.9
8 years ago
0.3.8
8 years ago
0.3.7
8 years ago
0.3.6
8 years ago
0.3.5
8 years ago
0.3.4
9 years ago
0.3.3
9 years ago
0.3.2
9 years ago
0.2.10
9 years ago
0.3.1
9 years ago
0.2.9
9 years ago
0.2.8
9 years ago
0.2.7
9 years ago
0.2.6
10 years ago
0.2.5
10 years ago
0.2.4
10 years ago
0.2.3
10 years ago
0.2.2
10 years ago
0.2.1
10 years ago
0.2.0
10 years ago
0.1.1
10 years ago
0.1.0
10 years ago