Transfer 穿梭框

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

用直观的方式在两栏中移动元素，完成选择行为。

API

Transfer

参数说明类型默认值
mode移动选项模式可选值:'normal', 'simple'Enum'normal'
dataSource数据源Array<Object>[]
value（用于受控）当前值Array<String>-
defaultValue（用于非受控）初始值Array<String>[]
onChange值发生改变的时候触发的回调函数签名:Function(value: Array, data: Array, extra: Object) => void参数:value: {Array} 右面板值data: {Array} 右面板数据extra: {Object} 额外参数extra.leftValue: {Array} 左面板值extra.leftData: {Array} 左面板数据extra.movedValue: {Array} 发生移动的值extra.movedData: {Object} 发生移动的数据extra.direction: {String} 移动的方向，值为'left'或'right'Function-
disabled是否禁用Booleanfalse
leftDisabled是否禁用左侧面板Booleanfalse
rightDisabled是否禁用右侧面板Booleanfalse
itemRender列表项渲染函数签名:Function(data: Object) => ReactNode参数:data: {Object} 数据返回值:{ReactNode} 列表项内容Functiondata => data.label
showSearch是否显示搜索框Booleanfalse
filter自定义搜索函数签名:Function(searchedValue: String, data: Object) => Boolean参数:searchedValue: {String} 搜索的内容data: {Object} 数据返回值:{Boolean} 是否匹配到Function根据 label 属性匹配
onSearch搜索框输入时触发的回调函数签名:Function(searchedValue: String, position: String) => void参数:searchedValue: {String} 搜索的内容position: {String} 搜索面板的位置Function() => {}
searchPlaceholder搜索框占位符String-
notFoundContent列表为空显示内容ReactNode'Not Found'
titles左右面板标题Array<ReactNode>[]
operations向右向左移动按钮显示内容Array<ReactNode><
defaultLeftChecked左面板默认选中值Array<String>[]
defaultRightChecked右面板默认选中值Array<String>[]
listClassName左右面板列表自定义样式类名String-
listStyle左右面板列表自定义样式对象Object-
sortable是否允许拖拽排序Booleanfalse
onSort拖拽排序时触发的回调函数签名:Function(value: Array, position: String) => void参数:value: {Array} 排序后的值position: {String} 拖拽的面板位置，值为：left 或 rightFunction() => {}
id请设置 id 以保证transfer的可访问性String-

ARIA and KeyBoard

按键说明
Up Arrow获取当前项的前一项焦点
Down Arrow获取当前项的后一项焦点
Enter当前列表选中的项移动到另一个列表
SPACE选择/取消当前项或当前列表选中的项移动到另一个列表

代码示例

基本

最简单的用法。

Transfer 穿梭框 - 图1

查看源码在线预览

  1. import { Transfer } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: `content${i}`,
  9.             value: `${i}`,
  10.             disabled: i % 4 === 0
  11.         });
  12.     }
  14.     return dataSource;
  15. })();
  17. class Demo extends React.Component {
  18.     constructor(props) {
  19.         super(props);
  21.         this.handleChange = this.handleChange.bind(this);
  22.     }
  24.     handleChange(value, data, extra) {
  25.         console.log(value, data, extra);
  26.     }
  28.     render() {
  29.         return (
  30.             <Transfer defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Title', 'Title']} />
  31.         );
  32.     }
  33. }
  35. ReactDOM.render(<Demo />, mountNode);

受控

展示受控的用法。

Transfer 穿梭框 - 图2

查看源码在线预览

  1. import { Transfer } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: `content${i}`,
  9.             value: `${i}`,
  10.             disabled: i % 4 === 0
  11.         });
  12.     }
  14.     return dataSource;
  15. })();
  17. class Demo extends React.Component {
  18.     constructor(props) {
  19.         super(props);
  21.         this.state = {
  22.             value: ['3']
  23.         };
  25.         this.handleChange = this.handleChange.bind(this);
  26.     }
  28.     handleChange(value, data, extra) {
  29.         console.log(value, data, extra);
  31.         this.setState({
  32.             value
  33.         });
  34.     }
  36.     render() {
  37.         return <Transfer value={this.state.value} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Title', 'Title']} />;
  38.     }
  39. }
  41. ReactDOM.render(<Demo />, mountNode);

简单模式

通过设置 mode 为 'simple'，可以开启简单模式，点击选项即移动。

Transfer 穿梭框 - 图3

查看源码在线预览

  1. import { Transfer } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: `content${i}`,
  9.             value: `${i}`,
  10.             disabled: i % 4 === 0
  11.         });
  12.     }
  14.     return dataSource;
  15. })();
  17. class Demo extends React.Component {
  18.     constructor(props) {
  19.         super(props);
  21.         this.handleChange = this.handleChange.bind(this);
  22.     }
  24.     handleChange(value, data, extra) {
  25.         console.log(value, data, extra);
  26.     }
  28.     render() {
  29.         return <Transfer mode="simple" defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Simple Mode', 'Simple Mode']} />;
  30.     }
  31. }
  33. ReactDOM.render(<Demo />, mountNode);

搜索

展示搜索的用法。

Transfer 穿梭框 - 图4

查看源码在线预览

  1. import { Transfer } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: `content${i}`,
  9.             value: `${i}`,
  10.             disabled: i % 4 === 0
  11.         });
  12.     }
  14.     return dataSource;
  15. })();
  17. class Demo extends React.Component {
  18.     constructor(props) {
  19.         super(props);
  21.         this.handleChange = this.handleChange.bind(this);
  22.     }
  24.     handleChange(value, data, extra) {
  25.         console.log(value, data, extra);
  26.     }
  28.     render() {
  29.         return <Transfer showSearch defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Searchable', 'Searchable']} />;
  30.     }
  31. }
  33. ReactDOM.render(<Demo />, mountNode);

拖拽排序

设置 sortable 属性为 true 后，可拖拽排序左右面板。

Transfer 穿梭框 - 图5

查看源码在线预览

  1. import { Transfer } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: `content${i}`,
  9.             value: `${i}`,
  10.             disabled: i % 4 === 0
  11.         });
  12.     }
  14.     return dataSource;
  15. })();
  17. class Demo extends React.Component {
  18.     constructor(props) {
  19.         super(props);
  21.         this.handleSort = this.handleSort.bind(this);
  22.     }
  24.     handleSort(value, position) {
  25.         console.log(value, position);
  26.     }
  28.     render() {
  29.         return <Transfer sortable defaultValue={['3']} dataSource={dataSource} onSort={this.handleSort} titles={['Sortable', 'Sortable']} />;
  30.     }
  31. }
  33. ReactDOM.render(<Demo />, mountNode);

自定义

展示自定义样式的用法。

Transfer 穿梭框 - 图6

查看源码在线预览

  1. import { Transfer, Button } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,
  9.             value: `${i}`,
  10.             disabled: i % 4 === 0
  11.         });
  12.     }
  14.     return dataSource;
  15. })();
  17. class Demo extends React.Component {
  18.     constructor(props) {
  19.         super(props);
  21.         this.handleChange = this.handleChange.bind(this);
  22.     }
  24.     handleChange(value, data, extra) {
  25.         console.log(value, data, extra);
  26.     }
  28.     render() {
  29.         return (
  30.             <Transfer 
  31.                 defaultValue={['3']} 
  32.                 dataSource={dataSource} 
  33.                 listStyle={{ width: '200px', height: '192px' }} 
  34.                 defaultLeftChecked={['1']} 
  35.                 onChange={this.handleChange} 
  36.                 titles={[<Button key='left' type='primary'>Source</Button>, 'Target']} 
  37.                 operations={['>>', '<<']} />
  38.         );
  39.     }
  40. }
  42. ReactDOM.render(<Demo />, mountNode);

无障碍

通过设置locale去修改对无障碍支持，默认已经设置，请参考ARIA and KeyBoard。为保证可访问性，需要设置全局唯一的id

Transfer 穿梭框 - 图7

查看源码在线预览

  1. import { Transfer } from '@alifd/next';
  3. const dataSource = (() => {
  4.     const dataSource = [];
  6.     for (let i = 0; i < 10; i++) {
  7.         dataSource.push({
  8.             label: `content${i}`,
  9.             value: `${i}`,
  10.         });
  11.     }
  13.     return dataSource;
  14. })();
  16. const obj = {
  17.     items: '项',
  18.     item: '项',
  19.     moveAll: '移动全部',
  20.     searchPlaceholder: '请输入',
  21.     moveToLeft: '撤销选中元素',
  22.     moveToRight: '提交选中元素'
  23. };
  25. class Demo extends React.Component {
  26.     constructor(props) {
  27.         super(props);
  29.         this.handleChange = this.handleChange.bind(this);
  30.     }
  32.     handleChange(value, data, extra) {
  33.         console.log(value, data, extra);
  34.     }
  36.     render() {
  37.         return (
  38.             <Transfer id="a11y-transfer" defaultValue={['2']} dataSource={dataSource} defaultLeftChecked={['1']} locale={obj} onChange={this.handleChange} titles={['Title', 'Title']} />
  39.         );
  40.     }
  41. }
  43. ReactDOM.render(<Demo />, mountNode);

相关区块

Transfer 穿梭框 - 图8

暂无相关区块