List

Muestra una lista de elementos con soporte para paginación y estados de carga.

Importar

import { List } from 'asterui'

Ejemplos

Lista Básica

Lista simple con elementos.

</>

• 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

Con Avatar

Elementos de lista con avatares y descripciones.

</>

• 

  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

Estado de Carga

Lista en estado de carga con esqueleto.

</>

Loading

import { List } from 'asterui'

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

export default App

Con Paginación

Lista con controles de paginación.

</>

• 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

Propiedad	Descripción	Tipo	Predeterminado
dataSource	Array de elementos de datos a renderizar	T[]	-
renderItem	Función para renderizar cada elemento	(item: T, index: number) => React.ReactNode	-
header	Contenido del encabezado de la lista	React.ReactNode	-
footer	Contenido del pie de página de la lista	React.ReactNode	-
loading	Si la lista está en estado de carga	boolean	false
pagination	Configuración de paginación	ListPaginationConfig | false	false
grid	Configuración de diseño de cuadrícula	ListGridConfig	-
bordered	Mostrar borde alrededor de la lista	boolean	true
split	Mostrar divisor entre elementos	boolean	true
size	Variante de tamaño	'sm' | 'md' | 'lg'	'md'
itemLayout	Dirección de diseño para elementos	'horizontal' | 'vertical'	'horizontal'
locale	Texto de internacionalización	{ emptyText?: React.ReactNode }	-
loadMore	Contenido de cargar más (ej. botón)	React.ReactNode	-
rowKey	Extracción de clave personalizada para elementos	keyof T | ((item: T) => React.Key)	-
data-testid	ID de prueba para el componente	string	'list'
aria-label	Etiqueta accesible para la lista	string	-

List.Item

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido del elemento	React.ReactNode	-
actions	Botones de acción mostrados a la derecha	React.ReactNode[]	-
extra	Contenido adicional en el lado derecho	React.ReactNode	-
className	Clases CSS adicionales	string	-

List.Item.Meta

Propiedad	Descripción	Tipo	Predeterminado
avatar	Elemento de avatar o icono	React.ReactNode	-
title	Contenido del título	React.ReactNode	-
description	Contenido de descripción	React.ReactNode	-

Accesibilidad

• Usa aria-label para proporcionar contexto a la lista
• Los elementos de lista se renderizan en elementos semánticos <ul> o <ol>
• El estado de carga se comunica a lectores de pantalla
• Los controles de paginación son accesibles por teclado
• El contenido de estado vacío se anuncia apropiadamente