Transfer 穿梭框

使用场景:用直观的方式在两栏中移动元素,完成选择行为。

基本用法

Loading demo...

APIs

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() => void
Function-
useVirtual是否开启虚拟滚动Boolean-
showCheckAll是否显示底部全选 checkboxBooleantrue

Demo

搜索

设置 showSearch 属性来显示搜索框

Loading demo...

单选

设置 mode 属性来显示搜索框

Loading demo...

自定义

用户可以自定义穿梭框样式,标题及穿梭按钮等。

Loading demo...

受控

Loading demo...