List
Lista em que cada linha é um card. Não busca nem filtra: recebe os itens prontos e cuida do card, da seleção, do menu de ações, do colapso e do arrastar. Três layouts: padrão, agrupado e hierárquico. Para toolbar, busca e filtros, use o DataList.
Padrão
Slots do card: leading, title, subtitle, description, meta (colunas alinhadas, somem quando o card tem menos de 576px) e trailing. getMenuItems cria o menu de ações; onItemClick torna o card inteiro clicável.
- marina.couto@exemplo.com.br
- Papel
- Administrador
- Equipe
- Jurídico
Ativo - rafael.antunes@exemplo.com.br
- Papel
- Editor
- Equipe
- Comercial
Ativo - livia.prado@exemplo.com.br
- Papel
- Signatário
- Equipe
- Financeiro
Convite pendente - otavio.reis@exemplo.com.br
- Papel
- Editor
- Equipe
- Jurídico
Ativo
Clique em um card para abrir.
Densidade compacta
density="compact" reduz o espaço interno para listas longas.
- Beatriz Lemosbeatriz.lemos@exemplo.com.br
- Papel
- Signatário
- Equipe
- Operações
Ativo - Caio Moreiracaio.moreira@exemplo.com.br
- Papel
- Administrador
- Equipe
- Diretoria
Ativo - Helena Duartehelena.duarte@exemplo.com.br
- Papel
- Signatário
- Equipe
- Comercial
Bloqueado - Igor Fontesigor.fontes@exemplo.com.br
- Papel
- Editor
- Equipe
- Financeiro
Convite pendente
Carregando e vazio
loading troca os cards por esqueletos (skeletonCount define quantos). emptyState aparece quando items está vazio.
Nenhum convite pendente
Os convites enviados aparecem aqui até serem aceitos.
Uso
<List
aria-label="Membros da conta"
items={members.map((member) => ({
id: member.email,
title: member.name,
subtitle: member.email,
leading: <Avatar … />,
meta: [{ label: "Papel", value: member.role }],
trailing: <StatusBadge … />,
}))}
onItemClick={open}
getMenuItems={(item) => [{ label: "Editar", icon: PenLine, onClick: () => edit(item) }]}
/>Props
ListItemData = { id, title, subtitle?, description?, leading?, meta?, trailing?, groupId?, children?, disabled?, textValue?, data? }.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| items | ListItemData[] | — | Itens. No hierárquico, filhos em children. |
| aria-label | string | — | Nome da lista para leitor de tela. Obrigatório. |
| layout | "standard" | "grouped" | "hierarchical" | "standard" | Lista plana, por grupos ou em árvore. |
| groups | ListGroup[] | — | Grupos do layout agrupado; o item entra pelo groupId. |
| renderItem | (item, state) => ReactNode | — | Troca o miolo do card; seleção, alça e menu continuam do List, com o menu no canto superior direito. |
| getMenuItems | (item) => ListMenuItem[] | — | Menu ⋯ por item. |
| onItemClick | (item) => void | — | Card inteiro clicável, sem aninhar controles em botão. |
| selectable · selectedIds · onSelectionChange | boolean · Set<string> · (ids) => void | — | Seleção controlada ou não (defaultSelectedIds). |
| expandedIds · defaultExpandedIds · onExpandedChange | Set<string> | — | Nós abertos no hierárquico. Começam fechados. |
| enableDnD · onReorder · onMove | boolean · (id, toIndex) · (id, from, to, toIndex) | — | Arrastar. A lista só avisa; quem usa atualiza os itens. |
| showConnectors · indentSize | boolean · number | true · 24 | Linhas e recuo do hierárquico. |
| groupSurface | boolean | false | Painel de fundo em cada grupo. |
| loading · skeletonCount · emptyState | boolean · number · ReactNode | — | Estados de carregamento e vazio. |
| density | "compact" | "comfortable" | "comfortable" | Espaço interno dos cards. |