List

Exiba uma lista de itens com suporte para paginação e estados de carregamento.

Importação

import { List } from 'asterui'

Exemplos

Lista Básica

Lista simples com itens.

</>

• 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

Com Avatar

Itens de lista com avatares e descrições.

</>

• 

  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 Carregamento

Lista em estado de carregamento com skeleton.

</>

Loading

import { List } from 'asterui'

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

export default App

Com Paginação

Lista com controles de paginação.

</>

• 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

Propriedade	Descrição	Tipo	Padrão
dataSource	Array de itens de dados para renderizar	T[]	-
renderItem	Função para renderizar cada item	(item: T, index: number) => React.ReactNode	-
header	Conteúdo do cabeçalho da lista	React.ReactNode	-
footer	Conteúdo do rodapé da lista	React.ReactNode	-
loading	Se a lista está em estado de carregamento	boolean	false
pagination	Configuração de paginação	ListPaginationConfig | false	false
grid	Configuração de layout de grade	ListGridConfig	-
bordered	Mostrar borda ao redor da lista	boolean	true
split	Mostrar divisor entre itens	boolean	true
size	Variante de tamanho	'sm' | 'md' | 'lg'	'md'
itemLayout	Direção do layout para itens	'horizontal' | 'vertical'	'horizontal'
locale	Texto de internacionalização	{ emptyText?: React.ReactNode }	-
loadMore	Conteúdo de carregar mais (ex: botão)	React.ReactNode	-
rowKey	Extração de chave personalizada para itens	keyof T | ((item: T) => React.Key)	-
data-testid	ID de teste para o componente	string	'list'
aria-label	Rótulo acessível para a lista	string	-

List.Item

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo do item	React.ReactNode	-
actions	Botões de ação exibidos à direita	React.ReactNode[]	-
extra	Conteúdo extra no lado direito	React.ReactNode	-
className	Classes CSS adicionais	string	-

List.Item.Meta

Propriedade	Descrição	Tipo	Padrão
avatar	Elemento de avatar ou ícone	React.ReactNode	-
title	Conteúdo do título	React.ReactNode	-
description	Conteúdo da descrição	React.ReactNode	-

Acessibilidade

• Use aria-label para fornecer contexto para a lista
• Itens de lista são renderizados em elementos <ul> ou <ol> semânticos
• Estado de carregamento é comunicado para leitores de tela
• Controles de paginação são acessíveis via teclado
• Conteúdo de estado vazio é anunciado adequadamente