Transfer 穿梭框

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

开发指南

何时使用

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

API

穿梭框

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
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-
showSearch是否显示搜索框Booleanfalse
searchPlaceholder搜索框占位符String'Search'
titles左右面板标题Array<ReactNode>[]
operations向右向左移动按钮显示内容Array<ReactNode><
defaultLeftChecked左面板默认选中值Array<String>[]
defaultRightChecked右面板默认选中值Array<String>[]
listStyle左右面板列表自定义样式Object-
locale自定义国际化文案对象Object-
language自定义国际化语言可选值:'zh-cn', 'en-us', 'zh-tw'Enum-

代码示例

基本

最简单的用法。

Transfer 穿梭框 - 图1

查看源码在线预览

  1. import { Transfer } from "@icedesign/base";
  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
  31.         defaultValue={["3"]}
  32.         dataSource={dataSource}
  33.         defaultLeftChecked={["1"]}
  34.         onChange={this.handleChange}
  35.       />
  36.     );
  37.   }
  38. }
  40. ReactDOM.render(<Demo />, mountNode);

受控

展示受控的用法。

Transfer 穿梭框 - 图2

查看源码在线预览

  1. import { Transfer } from "@icedesign/base";
  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 (
  38.       <Transfer
  39.         value={this.state.value}
  40.         dataSource={dataSource}
  41.         defaultLeftChecked={["1"]}
  42.         onChange={this.handleChange}
  43.       />
  44.     );
  45.   }
  46. }
  48. ReactDOM.render(<Demo />, mountNode);

自定义

展示自定义样式的用法。

Transfer 穿梭框 - 图3

查看源码在线预览

  1. import { Transfer } from "@icedesign/base";
  3. const dataSource = (() => {
  4.   const dataSource = [];
  6.   for (let i = 0; i < 10; i++) {
  7.     dataSource.push({
  8.       label:
  9.         i % 3 === 0
  10.           ? `content${i}contentcontentcontentcontentcontent`
  11.           : `content${i}`,
  12.       value: `${i}`,
  13.       disabled: i % 4 === 0
  14.     });
  15.   }
  17.   return dataSource;
  18. })();
  20. class Demo extends React.Component {
  21.   constructor(props) {
  22.     super(props);
  24.     this.handleChange = this.handleChange.bind(this);
  25.   }
  27.   handleChange(value, data, extra) {
  28.     console.log(value, data, extra);
  29.   }
  31.   render() {
  32.     return (
  33.       <Transfer
  34.         defaultValue={["3"]}
  35.         dataSource={dataSource}
  36.         listStyle={{ width: "200px", height: "192px" }}
  37.         defaultLeftChecked={["1"]}
  38.         onChange={this.handleChange}
  39.         language="en-us"
  40.         titles={["Source", "Target"]}
  41.         operations={[">>", "<<"]}
  42.       />
  43.     );
  44.   }
  45. }
  47. ReactDOM.render(<Demo />, mountNode);

搜索

展示搜索的用法。

Transfer 穿梭框 - 图4

查看源码在线预览

  1. import { Transfer } from "@icedesign/base";
  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
  31.         showSearch
  32.         defaultValue={["3"]}
  33.         dataSource={dataSource}
  34.         defaultLeftChecked={["1"]}
  35.         onChange={this.handleChange}
  36.       />
  37.     );
  38.   }
  39. }
  41. ReactDOM.render(<Demo />, mountNode);

相关区块

Transfer 穿梭框 - 图5

暂无相关区块