{"meta":"

Guide #

\n

When To Use #

\n

Move the items in two panels in an intuitive way to select.

\n","api":"

API #

\n

Transfer #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault ValueRequired
modeMove mode'normal' | 'simple''normal'
dataSourceData sourceArray<TransferDataItem>[]
value(under control) current valueArray<string>-
defaultValue(under uncontrolled) default valueArray<string>[]
onChangeCallback function triggered when value change

signature:
params:
value: Value of right panel
data: Data of right panel
extra: Extra parameters		(value: Array<string>, data: Array<TransferDataItem>, extra: ExtraOptions) => void-
onSelectCallback function triggered when item selected

signature:
params:
sourceSelectedValue: Value of checked items in source panel
targetSelectedValue: Value of checked items in target panel
target: Trigger panel source \\| target		(
sourceSelectedValue: Array<string>,
targetSelectedValue: Array<string>,
target: 'source' | 'target'
) => void		-
disabledDisable operations on transferbooleanfalse
leftDisabledDisable left panelbooleanfalse
rightDisabledDisable right panelbooleanfalse
itemRenderItem render function

signature:
params:
data: Data
return:
Content of item		(data: TransferDataItem) => React.ReactNode-
showSearchWhether to show the search boxboolean | [leftPanel: boolean, rightPanel: boolean]false
searchPropsProps passed to Search when showSearch is trueSearchProps | [leftPanel: SearchProps, rightPanel: SearchProps]-
filterCustom search function

signature:
params:
searchedValue: Search keyword
data: Data
return:
Whether is matched		(searchedValue: string, data: TransferDataItem) => boolean-
onSearchCallback function triggered when search

signature:
params:
searchedValue: Search keyword
position: Position of the search box		(searchedValue: string, position: string) => void-
useVirtualWhether use virtualboolean-
searchPlaceholderPlaceholder of the search boxstring-
notFoundContentContent when list is emptyReact.ReactNode | [leftPanel: React.ReactNode, rightPanel: React.ReactNode]'Not Found'
titlesTitle of the left and right panel[leftPanel: React.ReactNode, rightPanel: React.ReactNode][]
operationsText of move buttons[leftPanel: React.ReactNode, rightPanel: React.ReactNode][]
defaultLeftCheckedDefault checked value of left panelArray<string>[]
defaultRightCheckedDefault checked value of right panelArray<string>[]
listClassNameCustom list class namestring-
listStyleCustom list styleReact.CSSProperties-
sortableWhether to allow drag and drop sortbooleanfalse
onSortCallback function triggered when dragging sort

signature:
params:
value: Sorted value
position: Position of the sorted panel, 'left' or 'right'		(value: Array<string>, position: PositionType) => void-
idUnique id to make component accessiblestring-
showCheckAllWhether show footer's checkbooleantrue
childrenCustomer panel(props: TransferPanelProps) => React.ReactNode-
\n

TransferDataItem #

\n
export type TransferDataItem = {\n    label: string | React.ReactNode;\n    value: string;\n    title?: string;\n    disabled?: boolean;\n    children?: TransferDataItem[];\n    [key: string]: unknown;\n};\n
\n

PositionType #

\n
export type PositionType = 'left' | 'right';\n
\n

DragGapType #

\n
export type DragGapType = 'before' | 'after';\n
\n

ExtraOptions #

\n
export type ExtraOptions = {\n    /**\n     * 移动的方向，值为'left'或'right'\n     * @en Move direction, 'left' or 'right'\n     */\n    direction: PositionType;\n    /**\n     * 左面板值\n     * @en Data of left panel\n     */\n    leftValue: string[];\n    /**\n     * 左面板数据\n     * @en Data of left panel\n     */\n    leftData: TransferDataItem[];\n    /**\n     * 发生移动的数据\n     * @en Moved data\n     */\n    movedData: TransferDataItem[];\n    /**\n     * 发生移动的值\n     * @en Moved value\n     */\n    movedValue: string[];\n};\n
\n

ARIA and KeyBoard #

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Up ArrowGet the previous item focus of the current item
Down ArrowGet the next item focus of the current item
Enterthe item selected in the current list to move to another list
SpaceSelect or cancel the current item or the item selected in the current list to move to another list
\n"}