代码演示
如何引入
基本使用
数据项需传入 value、label、key
分组
将 type 设为
groupList
分组的 dataSource,一级子元素必须拥有 title 以及 children 属性,结构参考 <GroupItem>
暂不支持多层嵌套
自定义筛选逻辑,自定义选项数据渲染
使用
使用
使用
filter
自定义搜索逻辑,返回 true 时表示当前项符合筛选规则,保留当前项在列表中的显示,返回 false 则表示不符合,当前项会被隐藏使用
renderSourceItem
,你可以自定义左侧每一条源数据的渲染结构使用
renderSelectedItem
你可以自定义右侧每一条已选项的渲染结构禁用
拖拽排序
将
draggable
设为 true,开启拖拽排序功能。v1.11.0 后支持拖拽 + 自定义已选项渲染
将
你可以将触发器定义为任意你想要的ReactNode,并且添加样式。将拖拽触发器,使用
draggable
设为 true,开启拖拽排序功能;使用 renderSelectedItem
自定义右侧已选项渲染;你可以将触发器定义为任意你想要的ReactNode,并且添加样式。将拖拽触发器,使用
sortableHandle
进行包裹即可(sortableHandle于 v 1.22.0 后提供), 完全自定义渲染
Semi 提供了
通过该功能,你可以直接复用 Transfer 内部的逻辑能力,实现高度自定义样式结构的
renderSourcePanel
、renderSelectedPanel
入参,允许你完全自定义左右侧两个面板的渲染结构通过该功能,你可以直接复用 Transfer 内部的逻辑能力,实现高度自定义样式结构的
Transfer
组件 renderSourcePanel: (sourcePanelProps: SourcePanelProps) => ReactNode
SourcePanelProps
包含以下参数,你可以从中获取数据来渲染出你的 Panel 结构renderSelectedPanel: (selectedPanelProps: SelectedPanelProps) => ReactNode
SelectedPanelProps
包含以下参数完全自定义渲染 、 拖拽排序
在完全自定义渲染的场景下,由于拖拽区的渲染也已由你完全接管,因此你不声明 draggable 亦可。
但你需要自行实现拖拽逻辑,我们推荐直接使用
要支持拖拽排序,你需要在拖拽排序结束后,将 oldIndex、newIndex 作为入参,调用 onSortEnd
但你需要自行实现拖拽逻辑,我们推荐直接使用
react-sortable-hoc
要支持拖拽排序,你需要在拖拽排序结束后,将 oldIndex、newIndex 作为入参,调用 onSortEnd
树穿梭框
传入 type 为
treeList
,使用Tree
组件作为自定义渲染列表。v1.20.0 提供可通过treeProps(TreeProps)来覆盖默认树的属性,左侧树默认属性为
Accessibility
ARIA
- 搜索框添加
role
search
- 右侧选中列表添加
role
list
,选中项添加role
listitem
API 参考
Trasnfer Props
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
className | 样式类名 | string | ||
dataSource | 数据源 | Array<Item>|Array<GroupItem>|Array<TreeItem> | [] | |
defaultValue | 默认已选中值 | Array<string|number> | ||
disabled | 是否禁用 | boolean | false | |
draggable | 是否开启拖拽排序 | boolean | false | |
emptyContent | 自定义空状态的提示文本,search 为无搜索结果时展示的文本,left 为左侧无源数据时的文本,right 为无勾选数据时的提示文本 | {left: ReactNode; right: ReactNode; search: ReactNode;} | ||
filter | 自定义筛选逻辑, 当为 false 时,不展示搜索框 | boolean | (input:string, item: Item) => boolean | true | |
inputProps | 可用于自定义搜索框 Input,可配置属性参考 Input 组件 | InputProps | ||
loading | 是否正在加载左侧选项 | boolean | - | |
onChange | 选中值发生变化时触发的回调, 拖拽排序变化后也会触发该回调 | (values: Array<string|number>, items: Array<Item>) => void | ||
onDeselect | 取消勾选时的回调 | (item: Item) => void | ||
onSearch | 搜索框输入内容变化时调用 | (inputValue: string) => void | ||
onSelect | 勾选时的回调 | (item: Item) => void | ||
renderSelectedItem | 自定义右侧单个已选项的渲染 | (item: { onRemove, sortableHandle } & Item) => ReactNode | ||
renderSelectedPanel | 自定义右侧已选面板的渲染 | (selectedPanelProps) => ReactNode | 1.11.0 | |
renderSourceItem | 自定义左侧单个候选项的渲染 | (item: { onChange, checked } & Item) => ReactNode | ||
renderSourcePanel | 自定义左侧候选面板的渲染 | (sourcePanelProps) => ReactNode | 1.11.0 | |
showPath | 当 type 为treeList 时,控制右侧选中项是否显示选择路径 | boolean | false | 1.20.0 |
style | 内联样式 | CSSProperties | ||
treeProps | 当 type 为treeList 时,可作为 TreeProps 传入左侧的 Tree 组件 | TreeProps | 1.20.0 | |
type | Transfer 类型,可选list ,groupList ,treeList | string | 'list' | 1.20.0 |
value | 已选中值,传入该项时,将作为受控组件使用 | Array<string|number> |
Item Interface
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
className | 样式类名 | string | |
disabled | 是否禁用 | boolean | false |
key | 必填,每个选项的唯一标识,不允许重复 | string | number | |
label | 选项展示内容 | ReactNode | |
style | 内联样式 | CSSProperties | |
value | 选项代表的值 | string | number |
GroupItem Interface
GroupItem继承Item的所有属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
children | 该分组的元素 | Array<Item> | |
title | 分组名称 | string |
TreeItem Interface
TreeItem 继承 Item 的所有属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
children | 子元素 | Array<TreeItem> |