Transfer

Composant de transfert à deux colonnes pour déplacer des éléments entre des listes.

Importation

import { Transfer } from 'asterui'

Exemples

Transfer basique

Déplacez des éléments entre deux colonnes.

</>

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

Avec recherche

Filtrez les éléments avec une entrée de recherche.

</>

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

Rendu personnalisé

Rendu d'élément personnalisé avec titre et description.

</>

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

Éléments désactivés

Certains éléments peuvent être désactivés.

</>

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

Titres personnalisés

Personnalisez les en-têtes de colonne.

</>

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

Propriété	Description	Type	Défaut
dataSource	Tableau de source de données	TransferItem[]	[]
targetKeys	Clés des éléments dans la colonne de droite	string[]	[]
onChange	Callback lorsque les éléments sont transférés	(targetKeys: string[]) => void	-
render	Fonction de rendu personnalisée pour les éléments	(item: TransferItem) => React.ReactNode	-
showSearch	Afficher l’entrée de recherche	boolean	false
titles	Titres pour les colonnes de gauche et de droite	[string, string]	['Source', 'Target']
className	Classes CSS supplémentaires	string	-

TransferItem

Propriété	Description	Type	Défaut
key	Identifiant unique	string	-
title	Titre affiché	string	-
description	Description facultative	string	-
disabled	Si l’élément est désactivé	boolean	false

Accessibilité

• Utilise des entrées de case à cocher pour la sélection d’éléments
• Navigation au clavier entre les éléments
• Les boutons de transfert sont accessibles au clavier
• Les éléments désactivés sont correctement annoncés