穿梭框 Transfer - Namu Design

基本用法

最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。

单向样式

通过 oneWay 将 Transfer 转为单向样式。

0 项

暂无数据

0 项

暂无数据

带搜索框

带搜索框的穿梭框，可以自定义搜索函数。

高级用法

穿梭框高级用法，可配置操作文案，可定制宽高，可对底部进行自定义渲染。

0 项

暂无数据

0 项

暂无数据

自定义渲染行数据

自定义渲染每一个 Transfer Item，可用于渲染复杂数据。

0 项

暂无数据

0 项

暂无数据

分页

大数据下使用分页。

14 项

Name	Tag	Description
content1	cat	description of content1
content2	dog	description of content2
content4	cat	description of content4
content5	dog	description of content5
content7	cat	description of content7
content8	dog	description of content8
content10	cat	description of content10
content11	dog	description of content11
content13	cat	description of content13
content14	dog	description of content14

1
2

	Name
	content3
	content6
	content9
	content12
	content15
	content18

表格穿梭框

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

7 项

0-0

0-1

0-1-0

0-1-1

0-2

0-3

0-4

0 项

暂无数据

树穿梭框

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

0 项

暂无数据

0 项

暂无数据

0 项

暂无数据

0 项

暂无数据

自定义状态

使用 status 为 Transfer 添加状态，可选 error 或者 warning。

参数	说明	类型	默认值	版本
dataSource	数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外	RecordType extends TransferItem = TransferItem[]	[]
disabled	是否禁用	boolean	false
selectionsIcon	自定义下拉菜单图标	React.ReactNode		5.8.0
filterOption	根据搜索内容进行筛选，接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false	(inputValue, option): boolean	-
footer	底部渲染函数	(props, { direction }) => ReactNode	-	direction: 4.17.0
listStyle	两个穿梭框的自定义样式	object\|({direction: `left` \| `right`}) => object	-
locale	各种语言	{ itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; }	{ itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` }
oneWay	展示为单向样式	boolean	false	4.3.0
operations	操作文案集合，顺序从上至下	string[]	[`>`, `<`]
operationStyle	操作栏的自定义样式	CSSProperties	-
pagination	使用分页样式，自定义渲染列表下无效	boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean }	false	4.3.0
render	每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title	(record) => ReactNode	-
selectAllLabels	自定义顶部多选框标题的集合	(ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[]	-
selectedKeys	设置哪些项应该被选中	string[]	[]
showSearch	是否显示搜索框	boolean	false
showSelectAll	是否展示全选勾选框	boolean	true
status	设置校验状态	'error' \| 'warning'	-	4.19.0
targetKeys	显示在右侧框数据的 key 集合	string[]	[]
titles	标题集合，顺序从左至右	ReactNode[]	-
onChange	选项在两栏之间转移时的回调函数	(targetKeys, direction, moveKeys): void	-
onScroll	选项列表滚动时的回调函数	(direction, event): void	-
onSearch	搜索框内容时改变时的回调函数	(direction: `left` \| `right`, value: string): void	-
onSelectChange	选中项发生改变时的回调函数	(sourceSelectedKeys, targetSelectedKeys): void	-

参数	说明	类型
direction	渲染列表的方向	`left` \| `right`
disabled	是否禁用列表	boolean
filteredItems	过滤后的数据	RecordType[]
selectedKeys	选中的条目	string[]
onItemSelect	勾选条目	(key: string, selected: boolean)
onItemSelectAll	勾选一组条目	(keys: string[], selected: boolean)

参数	说明	类型	默认值	版本
dataSource	数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外	RecordType extends TransferItem = TransferItem[]	[]
disabled	是否禁用	boolean	false
selectionsIcon	自定义下拉菜单图标	React.ReactNode		5.8.0
filterOption	根据搜索内容进行筛选，接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false	(inputValue, option): boolean	-
footer	底部渲染函数	(props, { direction }) => ReactNode	-	direction: 4.17.0
listStyle	两个穿梭框的自定义样式	object\|({direction: `left` \| `right`}) => object	-
locale	各种语言	{ itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; }	{ itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` }
oneWay	展示为单向样式	boolean	false	4.3.0
operations	操作文案集合，顺序从上至下	string[]	[`>`, `<`]
operationStyle	操作栏的自定义样式	CSSProperties	-
pagination	使用分页样式，自定义渲染列表下无效	boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean }	false	4.3.0
render	每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title	(record) => ReactNode	-
selectAllLabels	自定义顶部多选框标题的集合	(ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[]	-
selectedKeys	设置哪些项应该被选中	string[]	[]
showSearch	是否显示搜索框	boolean	false
showSelectAll	是否展示全选勾选框	boolean	true
status	设置校验状态	'error' \| 'warning'	-	4.19.0
targetKeys	显示在右侧框数据的 key 集合	string[]	[]
titles	标题集合，顺序从左至右	ReactNode[]	-
onChange	选项在两栏之间转移时的回调函数	(targetKeys, direction, moveKeys): void	-
onScroll	选项列表滚动时的回调函数	(direction, event): void	-
onSearch	搜索框内容时改变时的回调函数	(direction: `left` \| `right`, value: string): void	-
onSelectChange	选中项发生改变时的回调函数	(sourceSelectedKeys, targetSelectedKeys): void	-

参数	说明	类型
direction	渲染列表的方向	`left` \| `right`
disabled	是否禁用列表	boolean
filteredItems	过滤后的数据	RecordType[]
selectedKeys	选中的条目	string[]
onItemSelect	勾选条目	(key: string, selected: boolean)
onItemSelectAll	勾选一组条目	(keys: string[], selected: boolean)

Namu Design

Transfer
穿梭框

Namu Design

Transfer
穿梭框

何时使用

代码演示

API

Transfer

Render Props

参考示例

注意

Design Token

组件 Token

全局 Token

FAQ

怎样让 Transfer 穿梭框列表支持异步数据加载

何时使用

代码演示

API

Transfer

Render Props

参考示例

注意

Design Token

组件 Token

全局 Token

FAQ

怎样让 Transfer 穿梭框列表支持异步数据加载

Transfer穿梭框更新日志

Transfer穿梭框更新日志

何时使用

代码演示

API

Transfer

Render Props

参考示例

注意

Design Token

组件 Token

全局 Token

FAQ

怎样让 Transfer 穿梭框列表支持异步数据加载

何时使用

代码演示

API

Transfer

Render Props

参考示例

注意

Design Token

组件 Token

全局 Token

FAQ

怎样让 Transfer 穿梭框列表支持异步数据加载

Transfer
穿梭框

Transfer
穿梭框