List

Affichez une liste d’éléments avec support de la pagination et des états de chargement.

Import

import { List } from 'asterui'

Exemples

Liste basique

Liste simple avec éléments.

</>

• Racing car sprints past
• Japanese princess unveiled
• Australian walks 100km
• Man charged over missing wedding

import { List } from 'asterui'

function App() {
  const basicData = [
    'Racing car sprints past',
    'Japanese princess unveiled',
    'Australian walks 100km',
    'Man charged over missing wedding',
  ];
  
  return (
      <List
        dataSource={basicData}
        renderItem={(item) => <List.Item>{item}</List.Item>}
      />
    )
}

export default App

Avec avatar

Éléments de liste avec avatars et descriptions.

</>

• 

  Alice Johnson

  alice@example.com
• 

  Bob Smith

  bob@example.com
• 

  Carol White

  carol@example.com

import { List, Avatar } from 'asterui'

function App() {
  const avatarData = [
    {
      name: 'Alice Johnson',
      email: 'alice@example.com',
      avatar: 'https://i.pravatar.cc/150?img=5',
    },
    {
      name: 'Bob Smith',
      email: 'bob@example.com',
      avatar: 'https://i.pravatar.cc/150?img=12',
    },
    {
      name: 'Carol White',
      email: 'carol@example.com',
      avatar: 'https://i.pravatar.cc/150?img=9',
    },
  ];
  
  return (
      <List
        dataSource={avatarData}
        renderItem={(item) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={item.avatar} alt={item.name} />}
              title={item.name}
              description={item.email}
            />
          </List.Item>
        )}
      />
    )
}

export default App

État de chargement

Liste en état de chargement avec squelette.

</>

Loading

import { List } from 'asterui'

function App() {
  return (
      <List
        dataSource={[]}
        renderItem={(item) => <List.Item>{item}</List.Item>}
        loading
      />
    )
}

export default App

Avec pagination

Liste avec contrôles de pagination.

</>

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

«‹12345›»

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

function App() {
  const allData = Array.from({ length: 23 }, (_, i) => `Item ${i + 1}`);
  const [page, setPage] = useState(1);
  const pageSize = 5;
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const currentData = allData.slice(start, end);
  
  return (
      <List
        dataSource={currentData}
        renderItem={(item) => <List.Item>{item}</List.Item>}
        pagination={{
          current: page,
          pageSize,
          total: allData.length,
          onChange: setPage,
        }}
      />
    )
}

export default App

API

List

Propriété	Description	Type	Par défaut
dataSource	Tableau d’éléments de données à rendre	T[]	-
renderItem	Fonction pour rendre chaque élément	(item: T, index: number) => React.ReactNode	-
header	Contenu de l’en-tête de liste	React.ReactNode	-
footer	Contenu du pied de page de liste	React.ReactNode	-
loading	Indique si la liste est en état de chargement	boolean	false
pagination	Configuration de pagination	ListPaginationConfig | false	false
grid	Configuration de mise en page en grille	ListGridConfig	-
bordered	Afficher la bordure autour de la liste	boolean	true
split	Afficher le diviseur entre les éléments	boolean	true
size	Variante de taille	'sm' | 'md' | 'lg'	'md'
itemLayout	Direction de mise en page pour les éléments	'horizontal' | 'vertical'	'horizontal'
locale	Texte d’internationalisation	{ emptyText?: React.ReactNode }	-
loadMore	Contenu de chargement supplémentaire (par ex., bouton)	React.ReactNode	-
rowKey	Extraction de clé personnalisée pour les éléments	keyof T | ((item: T) => React.Key)	-
data-testid	ID de test pour le composant	string	'list'
aria-label	Étiquette accessible pour la liste	string	-

List.Item

Propriété	Description	Type	Par défaut
children	Contenu de l’élément	React.ReactNode	-
actions	Boutons d’action affichés à droite	React.ReactNode[]	-
extra	Contenu supplémentaire sur le côté droit	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

List.Item.Meta

Propriété	Description	Type	Par défaut
avatar	Élément avatar ou icône	React.ReactNode	-
title	Contenu du titre	React.ReactNode	-
description	Contenu de la description	React.ReactNode	-

Accessibilité

• Utilisez aria-label pour fournir un contexte pour la liste
• Les éléments de liste sont rendus dans des éléments sémantiques <ul> ou <ol>
• L’état de chargement est communiqué aux lecteurs d’écran
• Les contrôles de pagination sont accessibles au clavier
• Le contenu de l’état vide est correctement annoncé