## 简介 穿梭框常用于多项信息选择场景，方便用户直观的对比待选项与已选项，其中待选项即可以被转移到已选项中（剪切），也可以被复制到已选项中（复制）。 ## 示例 ```tsx import React from 'react'; import { Transfer } from '@alicloud/console-components'; const labels = [ '默认项', '默认项', '默认项', '聚焦项', '默认项', '失效项', '默认项', ]; const getDataSource = () => { const result = []; for (let i = 0; i < 10; i++) { result.push({ label: labels[i], value: `${i}`, disabled: i === 5, }); } return result; }; const handleChange = (value, data, extra) => { console.log(value, data, extra); }; export default () => { return ( 项目列表标题, 项目列表标题, ]} /> ); }; export const meta = { title: '默认', describe: '基础用法，可通过titles定制两侧标题，mode属性控制选项模式。', }; ``` ```tsx import React from 'react'; import { Transfer } from '@alicloud/console-components'; const labels = [ '默认项', '默认项', '默认项', '聚焦项', '默认项', '失效项', '默认项', ]; const getDataSource = () => { const result = []; for (let i = 0; i < 10; i++) { result.push({ label: labels[i], value: `${i}`, disabled: i === 5, }); } return result; }; const handleChange = (value, data, extra) => { console.log(value, data, extra); }; export default () => { return ( 项目列标题, 项目列标题, ]} /> ); }; export const meta = { title: '带搜索', describe: '通过 showSearch 属性控制显示搜索框。', }; ``` ## API ### Transfer | 参数 | 说明 | 类型 | 默认值 | 是否必填 | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- | | mode | 移动选项模式 | 'normal' | 'simple' | 'normal' | | | dataSource | 数据源 | Array\ | \[] | | | value | （用于受控）当前值 | Array\ | - | | | defaultValue | （用于非受控）初始值 | Array\ | \[] | | | onChange | 值发生改变的时候触发的回调函数

**签名**:
**参数**:
*value*: 右面板值
*data*: 右面板数据
*extra*: 额外参数 | (value: Array\, data: Array\, extra: ExtraOptions) => void | - | | | onSelect | Item 被选中的时候触发的回调函数

**签名**:
**参数**:
*sourceSelectedValue*: 源面板选中的 Item 列表
*targetSelectedValue*: 目标面板选中的 Item 列表
*target*: 触发面板 'source' | 'target' | (
sourceSelectedValue: Array\,
targetSelectedValue: Array\,
target: 'source' | 'target'
) => void | - | | | disabled | 是否禁用 | boolean | false | | | leftDisabled | 是否禁用左侧面板 | boolean | false | | | rightDisabled | 是否禁用右侧面板 | boolean | false | | | itemRender | 列表项渲染函数

**签名**:
**参数**:
*data*: 数据
**返回值**:
列表项内容 | (data: TransferDataItem) => React.ReactNode | - | | | showSearch | 左右面板是否显示搜索框 | boolean | \[leftPanel: boolean, rightPanel: boolean] | false | | | searchProps | 左右面板搜索框配置 | SearchProps | \[leftPanel: SearchProps, rightPanel: SearchProps] | - | | | filter | 自定义搜索函数

**签名**:
**参数**:
*searchedValue*: 搜索框输入的值
*data*: 数据
**返回值**:
是否匹配到 | (searchedValue: string, data: TransferDataItem) => boolean | - | | | onSearch | 搜索框输入时触发的回调函数

**签名**:
**参数**:
*searchedValue*: 搜索框输入的值
*position*: 搜索面板的位置 | (searchedValue: string, position: string) => void | - | | | useVirtual | 是否开启虚拟滚动 | boolean | - | | | searchPlaceholder | 搜索框占位符 | string | - | | | notFoundContent | 列表为空显示内容 | React.ReactNode | \[leftPanel: React.ReactNode, rightPanel: React.ReactNode] | 'Not Found' | | | titles | 左右面板标题 | \[leftPanel: React.ReactNode, rightPanel: React.ReactNode] | \[] | | | operations | 向右向左移动按钮显示内容 | \[leftPanel: React.ReactNode, rightPanel: React.ReactNode] | \[] | | | defaultLeftChecked | 左面板默认选中值 | Array\ | \[] | | | defaultRightChecked | 右面板默认选中值 | Array\ | \[] | | | listClassName | 左右面板列表自定义样式类名 | string | - | | | listStyle | 左右面板列表自定义样式对象 | React.CSSProperties | - | | | sortable | 是否允许拖拽排序 | boolean | false | | | onSort | 拖拽排序时触发的回调函数

**签名**:
**参数**:
*value*: 右面板值
*position*: 拖拽的面板位置，值为：left 或 right | (value: Array\, position: PositionType) => void | - | | | id | 请设置 id 以保证transfer的可访问性 | string | - | | | showCheckAll | 是否显示底部全选 checkbox | boolean | true | | | children | 接收 children 自定义渲染列表 | (props: TransferPanelProps) => React.ReactNode | - | | ### TransferDataItem ```typescript export type TransferDataItem = { label: string | React.ReactNode; value: string; title?: string; disabled?: boolean; children?: TransferDataItem[]; [key: string]: unknown; }; ``` ### PositionType ```typescript export type PositionType = 'left' | 'right'; ``` ### DragGapType ```typescript export type DragGapType = 'before' | 'after'; ``` ### ExtraOptions ```typescript export type ExtraOptions = { /** * 移动的方向，值为'left'或'right' * @en Move direction, 'left' or 'right' */ direction: PositionType; /** * 左面板值 * @en Data of left panel */ leftValue: string[]; /** * 左面板数据 * @en Data of left panel */ leftData: TransferDataItem[]; /** * 发生移动的数据 * @en Moved data */ movedData: TransferDataItem[]; /** * 发生移动的值 * @en Moved value */ movedValue: string[]; }; ``` ## 无障碍键盘操作指南 | 按键 | 说明 | | :--------- | :------------------------------------------------ | | Up Arrow | 获取当前项的前一项焦点 | | Down Arrow | 获取当前项的后一项焦点 | | Enter | 当前列表选中的项移动到另一个列表 | | SPACE | 选择/取消当前项或当前列表选中的项移动到另一个列表 | ## 更多示例 ```tsx ``` ```tsx ``` ```tsx ``` ```tsx ``` ```tsx ``` ```tsx ``` ```tsx ``` ```tsx ```