总览

Transfer 穿梭框

开发指南

何时使用

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

Title
1/9 项
Title
1 项

基本

最简单的用法。

Title
1/9 项
Title
1 项

受控

展示受控的用法。

Simple Mode
移动全部
Simple Mode
移动全部

简单模式

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

Sortable
9 项
Sortable
1 项

拖拽排序

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

1/9 项
Target
1 项

自定义

展示自定义样式的用法。

7 项
Target
Not Found
0 项

树穿梭框

使用 Tree 组件作为自定义渲染列表。

Source
Label
Id
Quotation Nano 3
100306660940
Remove(100306660940)
Quotation Nano 3
100306660941
Remove(100306660941)
Quotation Nano 3
100306660942
Remove(100306660942)
3 项
Target
Label
没有数据
0 项

表格穿梭框

使用 Table 组件作为自定义渲染列表。

Title
1/9 项
Title
1 项

无障碍

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

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><Icon type="arrow-right" />, <Icon type="arrow-left" />
defaultLeftChecked左面板默认选中值Array<String>[]
defaultRightChecked右面板默认选中值Array<String>[]
listClassName左右面板列表自定义样式类名String-
listStyle左右面板列表自定义样式对象Object-
sortable是否允许拖拽排序Booleanfalse
onSort拖拽排序时触发的回调函数

签名:
Function(value: Array, position: String) => void
参数:
value: {Array} 排序后的值
position: {String} 拖拽的面板位置，值为：left 或 right		Function() => {}
id请设置 id 以保证 transfer 的可访问性String-
children接收 children 自定义渲染列表

签名:
Function(props: TransferPanelProps) => ReactNode		Function-
showCheckAllBooleantrue是否显示底部全选 checkbox

ARIA and KeyBoard

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