Transfer

Componente de transferencia de dos columnas para mover elementos entre listas.

Importación

import { Transfer } from 'asterui'

Ejemplos

Transfer Básico

Mueve elementos entre dos columnas.

</>

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

Con Búsqueda

Filtra elementos con entrada de búsqueda.

</>

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

Renderizado Personalizado

Renderizado personalizado de elementos con título y descripción.

</>

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

Elementos Deshabilitados

Algunos elementos pueden estar deshabilitados.

</>

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

Personaliza los encabezados de columna.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
dataSource	Array de origen de datos	TransferItem[]	[]
targetKeys	Claves de elementos en la columna derecha	string[]	[]
onChange	Callback cuando se transfieren elementos	(targetKeys: string[]) => void	-
render	Función de renderizado personalizada para elementos	(item: TransferItem) => React.ReactNode	-
showSearch	Mostrar entrada de búsqueda	boolean	false
titles	Títulos para columnas izquierda y derecha	[string, string]	['Source', 'Target']
className	Clases CSS adicionales	string	-

TransferItem

Propiedad	Descripción	Tipo	Predeterminado
key	Identificador único	string	-
title	Título de visualización	string	-
description	Descripción opcional	string	-
disabled	Si el elemento está deshabilitado	boolean	false

Accesibilidad

• Usa inputs de checkbox para selección de elementos
• Navegación por teclado entre elementos
• Los botones de transferencia son accesibles por teclado
• Los elementos deshabilitados se anuncian correctamente