Transfer 穿梭框

用于在列表之间移动项目的双列穿梭框组件。

导入

import { Transfer } from 'asterui'

示例

基础穿梭框

在两列之间移动项目。

</>

Source0/8

Item 1

Item 2

Item 4

Item 6

Item 7

Item 8

Item 9

Item 10

Target0/2

Item 3

Item 5

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const basicData: TransferItem[] = Array.from({ length: 10 }, (_, i) => ({
    key: `item-${i + 1}`,
    title: `Item ${i + 1}`,
    description: `Description of item ${i + 1}`,
  }))
  
  const [targetKeys, setTargetKeys] = useState<string[]>(['item-3', 'item-5'])
  
  return (
      <Transfer
        dataSource={basicData}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
      />
    )
}

export default App

带搜索

使用搜索输入过滤项目。

</>

Source0/10

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Target0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const basicData: TransferItem[] = Array.from({ length: 10 }, (_, i) => ({
    key: `item-${i + 1}`,
    title: `Item ${i + 1}`,
    description: `Description of item ${i + 1}`,
  }))
  
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  return (
      <Transfer
        dataSource={basicData}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
        showSearch
      />
    )
}

export default App

自定义渲染

带有标题和描述的自定义项目渲染。

</>

Source0/5

React

A JavaScript library for building user interfaces

Vue

The Progressive JavaScript Framework

Angular

Platform for building mobile and desktop web apps

Svelte

Cybernetically enhanced web apps

Solid

Simple and performant reactivity

Target0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  const data: TransferItem[] = [
    { key: '1', title: 'React', description: 'A JavaScript library for building user interfaces' },
    { key: '2', title: 'Vue', description: 'The Progressive JavaScript Framework' },
    {
      key: '3',
      title: 'Angular',
      description: 'Platform for building mobile and desktop web apps',
    },
    { key: '4', title: 'Svelte', description: 'Cybernetically enhanced web apps' },
    { key: '5', title: 'Solid', description: 'Simple and performant reactivity' },
  ]
  
  return (
      <Transfer
        dataSource={data}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => (
          <div>
            <div className="font-medium">{item.title}</div>
            <div className="text-xs opacity-60">{item.description}</div>
          </div>
        )}
      />
    )
}

export default App

禁用项目

某些项目可以被禁用。

</>

Source0/5

Available Item 1

Disabled Item

Available Item 2

Another Disabled

Available Item 3

Target0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  const data: TransferItem[] = [
    { key: '1', title: 'Available Item 1' },
    { key: '2', title: 'Disabled Item', disabled: true },
    { key: '3', title: 'Available Item 2' },
    { key: '4', title: 'Another Disabled', disabled: true },
    { key: '5', title: 'Available Item 3' },
  ]
  
  return (
      <Transfer
        dataSource={data}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
      />
    )
}

export default App

自定义标题

自定义列标题。

</>

Available0/10

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Selected0/0

No data

import { Transfer } from 'asterui'
import { useState } from 'react'

function App() {
  const basicData: TransferItem[] = Array.from({ length: 10 }, (_, i) => ({
    key: `item-${i + 1}`,
    title: `Item ${i + 1}`,
    description: `Description of item ${i + 1}`,
  }))
  
  const [targetKeys, setTargetKeys] = useState<string[]>([])
  
  return (
      <Transfer
        dataSource={basicData}
        targetKeys={targetKeys}
        onChange={setTargetKeys}
        render={(item) => item.title}
        titles={['Available', 'Selected']}
        showSearch
      />
    )
}

export default App

API

Transfer

属性	描述	类型	默认值
dataSource	数据源数组	TransferItem[]	[]
targetKeys	右列中的项目键	string[]	[]
onChange	项目传输时的回调	(targetKeys: string[]) => void	-
render	项目的自定义渲染函数	(item: TransferItem) => React.ReactNode	-
showSearch	显示搜索输入	boolean	false
titles	左右列的标题	[string, string]	['Source', 'Target']
className	额外的 CSS 类	string	-

TransferItem

属性	描述	类型	默认值
key	唯一标识符	string	-
title	显示标题	string	-
description	可选描述	string	-
disabled	项目是否禁用	boolean	false

可访问性

• 使用复选框输入进行项目选择
• 项目之间的键盘导航
• 传输按钮可通过键盘访问
• 禁用的项目被正确宣布