bee-transfer
Transfer ui component for react
Last updated a month ago by tinper-bot .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-transfer 
SYNC missed versions from official npm registry.

bee-transfer

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

两框之间的元素迁移,非常直观且有效。一个或多个元素选择后点击方向按钮转到另一列框中。左栏是“源”,右边是“目标”

使用

使用单独的transfer包

组件引入

先进行下载bee-transfer包

npm install --save bee-transfer

组件调用

import Transfer from 'bee-transfer';

const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
    disabled: i % 3 < 1,
  });
}


ReactDOM.render(
        <Transfer
		    dataSource={mockData}
		    titles={['Source', 'Target']}
		    render={item => item.title}
		  />
        , document.getElementById('target'));

样式引入

  • 可以使用link引入build目录下Transfer.css
<link rel="stylesheet" href="./node_modules/bee-transfer/build/Transfer.css">
  • 可以在js中import样式
import "./node_modules/bee-transfer/src/Transfer.scss"
//或是
import "./node_modules/bee-transfer/build/Transfer.css"

API

参数 说明 类型 默认值
dataSource 设置数据源。当有targetKey props存在时,dataSource的数据刨去targetKey数据,剩下的都放在左边列表 [] []
render 每行数据渲染函数,该函数的入参为 dataSource 中的项,返回值为 ReactElement。或者返回一个普通对象,其中 label 字段为 ReactElement,value 字段为 title Function(record) -
targetKeys 展示在右边列表的数据集 [] []
selectedKeys 所有选中的item的keys [] []
onChange 当item在穿梭成功后的回调 参数(targetKeys, direction, moveKeys) func -
onSelectChange 当选中的item发生改变时的回调 参数(sourceSelectedKeys, targetSelectedKeys) fun -
onScroll 当滑动可选的item列表的回调 参数(direction, event) func -
listStyle 自定义的columns的样式表 object -
className class string ''
titles 两columns的title [] -
operations 自定义按钮操作 [] '>', '<'
showSearch 是否显示搜索框 boolean false
filterOption 搜索过滤方法 参数(inputValue, option) func或者boolean -
searchPlaceholder 搜索框的默认显示文字 string 'Search'
notFoundContent 当没有相关内容的显示内容 string或ReactNode 'Not Found'
footer 渲染底部的dom ReactNode -
lazy 懒加载dom object 当tranfer放在bee-modal里 添加参数 lazy={{container:"modal"}}
onSearchChange 当搜索域变化的回调函数 参数(direction: 'left' 'right', event: Event) func
showCheckbox 是否显示Checkbox复选框 bool true
draggable 是否可以通过拖拽进行穿梭和排序 bool false
appendToBottom 是否将已选项追加到右侧列表末尾 bool false

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-transfer
$ cd bee-transfer
$ npm install
$ npm run dev

Current Tags

  • 2.0.11-alpha.1                                ...           alpha (a year ago)
  • 2.0.20                                ...           latest (a month ago)
  • 1.0.8-ncc.2                                ...           ncc (6 months ago)

36 Versions

  • 2.0.20                                ...           a month ago
  • 2.0.17                                ...           a month ago
  • 2.0.14                                ...           a month ago
  • 1.0.8-ncc.2                                ...           6 months ago
  • 1.0.8-ncc.1                                ...           6 months ago
  • 2.0.13                                ...           6 months ago
  • 2.0.12                                ...           a year ago
  • 2.0.11                                ...           a year ago
  • 2.0.11-alpha.1                                ...           a year ago
  • 2.0.11-alpha.0                                ...           a year ago
  • 2.0.10                                ...           a year ago
  • 2.0.10-alpha.0                                ...           a year ago
  • 2.0.9                                ...           a year ago
  • 2.0.8                                ...           2 years ago
  • 2.0.7                                ...           2 years ago
  • 2.0.6                                ...           2 years ago
  • 2.0.5                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago

Copyright 2014 - 2016 © taobao.org |