ant-design/components/transfer/index.en-US.md
二货爱吃白萝卜 cbcfd38ca7
docs: v5 site upgrade (#38328)
* build: try to use dumi as doc tool

* docs: migrate demo structure to dumi way

* refactor: use type export & import

* docs: migrate demo previewer to dumi

* docs: create empty layout & components

* docs: apply custom rehype plugin

* docs: create empty extra pages

* docs: Add Banner component

* chore: move theme tsconfig.json

* docs: home page init

* docs: migrate header (#37896)

* docs: header

* docs: update

* docs: home init

* clean up

* test: fix site lint

* chore: tsc ignore demo

* chore: dumi demo migrate script

* chore: cards

* docs: home layout

* docs: Update locale logic

* docs: fix getLink logic

* chore: fix ci (#37899)

* chore: fix ci

* ci: remove check-ts-demo

* ci: preview build

* test: ignore demo.tsx

* chore: update script

* test: update snapshot

* test: update node and image test

* chore: add .surgeignore

* docs: layout providers (#37908)

* docs: add components sidebar (#37923)

* docs: sidebar

* docs: update docs title

* docs: update design doc

* chore: code clean

* docs: handle changelog page

* docs: add title

* docs: add subtitle

* docs: active header nav

* chore: code clean

* docs: overview

* chore: code clean

* docs: update intl (#37918)

* docs: update intl

* chore: code clean

* docs: update favicons

* chore: update testPathIgnorePatterns

* chore: code clean

* chore: code clean

* chore: copy 404.html (#37996)

* docs: Home page theme picker

* chore: Update migrate script

* docs: home page update

* docs: theme editor style

* docs: theme lang

* chore: update migrate.js

* docs: fix demo (#38094)

* chore: update migrate.js

* docs: update md

* docs: update demo

* test: fix snapshot

* chore: move debug to code attr in migrate script

* chore: update md

Co-authored-by: PeachScript <scdzwyxst@gmail.com>

* feat: overview page

* feat: Migrate `404` page (#38118)

* feat: migrate IconSearch component (#37916)

* feat<site/IconSearch>: copy IconDisplay from site to .dumi

* feat<site/IconSearch>: change docs of icon

* feat<site/IconSearch>: tweak

* feat<site/IconSearch>: use useIntl instead of injectIntl

* feat<site/IconSearch>: fix ts type error

* feat<site/IconSearch>: use intl.formatMessage to render text

* docs: Adjust home btn sizw

* docs: Update doc

* feat: v5 site overview page (#38131)

* feat: site

* fix: fix

* feat: v5 site overview page

* fix: fix path

* fix: fix

* fix: fix

* docs: fix margin logic

* feat: v5 site change-log page (#38137)

* feat: v5 site change-log page (#38162)

* docs: site redirect to home pag

* docs: theme picker

* docs: use react-intl from dumi (#38183)

* docs: Theme Picker

* docs: update dumi config

* docs: home back fix

* docs: picker colorful

* docs: locale of it

* docs: update components desc

* docs: site of links

* docs: update components list

* docs: update desc

* feat: Migrate `DemoWrapper` component (#38166)

* feat: Migrate `DemoWrapper` component

* feat: remove invalid comments and add comment for `key` prop

* docs: FloatButton pure panel

* chore: update demo

* chore: update dumi config

* Revert "chore: update demo"

This reverts commit 028265d3ba5987df5f13c3e9d42cf76cb1812b2e.

* chore: test logic adjust to support cnpm modules

* chore: add locale alias

* docs: /index to /

* docs: add locale redirect head script

* chore: adjust compact

* docs: fix missing token

* feat: compact switch

* chore: code clean

* docs: update home

* docs: fix radius token

* docs: hash of it

* chore: adjust home page

* docs: Add background map

* docs: site theme bac logic

* docs: avatar

* docs: update logo color

* docs: home banner

* docs: adjust tour size

* docs: purepanl update

* docs: transfooter

* docs: update banner gif

* docs: content (#38361)

* docs: title & EditButton

* docs: content

* chore: fix toc

* docs: resource page

* docs: transform resource data from hast

* docs: filename & Resource Card

* chore: enable prerender

* chore: remove less

* docs: toc style

* chore: fix lint

* docs: fix Layout page

* docs: fix CP page

* chore: update demos

* docs: workaround for export dynamic html

* chore: enable demo eslint

* docs: table style

* fix: header shadow

* chore: update snapshot

* fix: toc style

* docs: add title

* docs: Adjust site

* feat: helmet

* docs: site css

* fix: description

* feat: toc debug

* docs: update config-provider

* feat: use colorPanel

* fix: colorPanel value

* feat: anchor ink ball style

* feat: apply theme editor

* fix: code block style

* chore: update demo

* chore: fix lint

* chore: code clean

* chore: update snapshot

* feat: ts2js

* chore: description

* docs: site ready for ssr

includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion

* chore: bump testing lib

* docs: font size of title

* chore: remove react-sortable-hoc

* chore: update snapshot

* chore: update script

Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
2022-11-09 12:28:04 +08:00

6.1 KiB

category group title cover demo
Components Data Entry Transfer https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
cols
2

Double column transfer choice box.

When To Use

  • It is a select control essentially which can be use for selecting multiple items.
  • Transfer can display more information for items and take up more space.

Transfer the elements between two columns in an intuitive and efficient way.

One or more elements can be selected from either column, one click on the proper direction button, and the transfer is done. The left column is considered the source and the right column is considered the target. As you can see in the API description, these names are reflected in.

Examples

Basic One Way Search Advanced Custom datasource Pagination Table Transfer Tree Transfer Status Custom Select All Labels

API

Property Description Type Default Version
dataSource Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in targetKeys prop RecordType extends TransferItem = TransferItem[] []
disabled Whether disabled transfer boolean false
filterOption A function to determine whether an item should show in search result list (inputValue, option): boolean -
footer A function used for rendering the footer (props, { direction }) => ReactNode - direction: 4.17.0
listStyle A custom CSS style used for rendering the transfer columns object | ({direction: left | right}) => object -
locale The i18n text including filter, empty text, item unit, etc { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode | ReactNode[]; } { itemUnit: item, itemsUnit: items, notFoundContent: The list is empty, searchPlaceholder: Search here }
oneWay Display as single direction style boolean false 4.3.0
operations A set of operations that are sorted from top to bottom string[] [>, <]
operationStyle A custom CSS style used for rendering the operations column object -
pagination Use pagination. Not work in render props boolean | { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } false 4.3.0
render The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with value and label, label is a React element and value is for title (record) => ReactNode -
selectAllLabels A set of customized labels for select all checkboxs on the header (ReactNode | (info: { selectedCount: number, totalCount: number }) => ReactNode)[] -
selectedKeys A set of keys of selected items string[] []
showSearch If included, a search box is shown on each column boolean false
showSelectAll Show select all checkbox on the header boolean true
status Set validation status 'error' | 'warning' - 4.19.0
targetKeys A set of keys of elements that are listed on the right column string[] []
titles A set of titles that are sorted from left to right ReactNode[] -
onChange A callback function that is executed when the transfer between columns is complete (targetKeys, direction, moveKeys): void -
onScroll A callback function which is executed when scroll options list (direction, event): void -
onSearch A callback function which is executed when search field are changed (direction: left | right, value: string): void -
onSelectChange A callback function which is executed when selected items are changed (sourceSelectedKeys, targetSelectedKeys): void -

Render Props

Transfer accept children to customize render list, using follow props:

Property Description Type Version
direction List render direction left | right
disabled Disable list or not boolean
filteredItems Filtered items RecordType[]
selectedKeys Selected items string[]
onItemSelect Select item (key: string, selected: boolean)
onItemSelectAll Select a group of items (keys: string[], selected: boolean)

example

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

Warning

According the standard of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in dataSource array. By default, key property is used as an unique identifier.

If there's no key in your data, you should use rowKey to specify the key that will be used for uniquely identify each element.

// eg. your primary key is `uid`
return <Transfer rowKey={record => record.uid} />;

FAQ

How to support fetch and present data from a remote server in Transfer column.

In order to keep the page number synchronized, you can disable columns you checked without removing the option: https://codesandbox.io/s/objective-wing-6iqbx