穿梭框

双栏穿梭选择框。

何时使用

• 需要在多个可选项中进行多选时。
• 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。

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

选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 source，右边一栏为 target，API 的设计也反映了这两个概念。

注意：穿梭框组件只支持受控使用，不支持非受控模式。

代码演示

• 基本用法 · basic
• 单向样式 · oneWay
• 带搜索框 · search
• 高级用法 · advanced
• 自定义渲染行数据 · custom-item
• 自定义操作按钮 · actions
• 分页 · large-data
• 表格穿梭框 · table-transfer
• 树穿梭框 · tree-transfer
• 自定义状态 · status
• 自定义语义结构的样式和类 · style-class

API

通用属性参考：通用属性

Transfer

Render Props

Transfer 支持接收 children 自定义渲染列表，并返回以下参数：

参考示例

<Transfer {...props}>{(listProps) => <YourComponent {...listProps} />}</Transfer>

注意

按照 React 的规范，所有的组件数组必须绑定 key。在 Transfer 中，dataSource 里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。

// 比如你的数据主键是 uid
return <Transfer rowKey={(record) => record.uid} />;

Semantic DOM

语义说明来源: vendor/components/transfer/demo/_semantic.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

声明来源: vendor/components/transfer/style/index.ts

import { unit } from '@ant-design/cssinjs';

import type { CSSObject } from '@ant-design/cssinjs';

import { operationUnit, resetComponent, resetIcon, textEllipsis } from '../../style';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 列表宽度
   * @descEN Width of list
   */
  listWidth: number | string;
  /**
   * @desc 大号列表宽度
   * @descEN Width of large list
   */
  listWidthLG: number | string;
  /**
   * @desc 列表高度
   * @descEN Height of list
   */
  listHeight: number | string;
  /**
   * @desc 列表项高度
   * @descEN Height of list item
   */
  itemHeight: number | string;
  /**
   * @desc 列表项纵向内边距
   * @descEN Vertical padding of list item
   */
  itemPaddingBlock: number | string;
  /**
   * @desc 顶部高度
   * @descEN Height of header
   */
  headerHeight: number | string;
}

interface TransferToken extends FullToken<'Transfer'> {
  transferHeaderVerticalPadding: number;
}

FAQ

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

为了保持页码同步，在勾选时可以不移除选项而以禁用代替：https://codesandbox.io/s/objective-wing-6iqbx

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

安装并复现示例

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

• vendor/components/transfer/Actions.tsx
• vendor/components/transfer/ListBody.tsx
• vendor/components/transfer/ListItem.tsx
• vendor/components/transfer/Section.tsx
• vendor/components/transfer/index.tsx
• vendor/components/transfer/interface.ts
• vendor/components/transfer/search.tsx
• vendor/components/transfer/style/index.ts

来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。