Transfer

Componente de transferência de duas colunas para mover itens entre listas.

Importação

import { Transfer } from 'asterui'

Exemplos

Transfer Básico

Mova itens entre duas colunas.

</>

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

Com Busca

Filtre itens com entrada de busca.

</>

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

Renderização Personalizada

Renderização personalizada de itens com título e descrição.

</>

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

Itens Desabilitados

Alguns itens podem ser desabilitados.

</>

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

Títulos Personalizados

Personalize os cabeçalhos das colunas.

</>

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

Propriedade	Descrição	Tipo	Padrão
dataSource	Array de fonte de dados	TransferItem[]	[]
targetKeys	Chaves de itens na coluna direita	string[]	[]
onChange	Callback quando itens são transferidos	(targetKeys: string[]) => void	-
render	Função de renderização personalizada para itens	(item: TransferItem) => React.ReactNode	-
showSearch	Mostrar entrada de busca	boolean	false
titles	Títulos para colunas esquerda e direita	[string, string]	['Source', 'Target']
className	Classes CSS adicionais	string	-

TransferItem

Propriedade	Descrição	Tipo	Padrão
key	Identificador único	string	-
title	Título de exibição	string	-
description	Descrição opcional	string	-
disabled	Se o item está desabilitado	boolean	false

Acessibilidade

• Usa inputs checkbox para seleção de itens
• Navegação por teclado entre itens
• Botões de transferência são acessíveis por teclado
• Itens desabilitados são anunciados corretamente