List
Listas organizam itens textuais em sequência vertical, servindo como ponto de partida para resumos e catálogos.
Quando usar
- Exibir coleções de itens curtos com leitura rápida.
- Estruturar resumos, agendas ou checklists sem formatação complexa.
- Alimentar componentes repetidos (
list $Componente) com dados tabulares. - Agrupar conteúdos em drawers, modais ou cards mantendo ritmo vertical.
Indentação primeiro, hífen apenas em listas
LLMs costumam inserir - para listar filhos de qualquer bloco, mas a DSL só aceita esse marcador em list, navigator e fab. Para layouts e componentes use apenas indentação; isso evita nós fantasmas e mantém a leitura clara para quem dá manutenção.
Exemplo básico
Lista com ações separadas
Por quê: mantém itens exclusivamente textuais e posiciona ações em bloco dedicado.
Variantes
Lista simples
Quando usar: enumerar itens curtos sem propriedades adicionais. Por quê: apresenta conteúdos simples sem exigir componentes complexos.
Lista baseada em componente
Quando usar: renderizar itens repetidos com múltiplos campos seguindo a mesma estrutura. Por quê: evita duplicação de markup enquanto mantém layout consistente.
Composição (usando com outros)
- List + Card — agrupa contexto e mantém itens alinhados.
- List + Component Definition — transforma dados tabulares em layouts ricos.
- List + Drawer — expõe listas de apoio sem sair da tela principal.
Lista com componente reutilizável
Por quê: mantém consistência na apresentação de métricas recorrentes.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
- | bloco | — | Renderiza itens textuais com marcador -. | Sim |
list $Componente | bloco | — | Usa componente previamente declarado para cada linha. | Não |
itens | texto ou dados separados por ` | ` | — | Dados passados para cada item ou componente. |
%props | interpolação | — | Variáveis dentro do componente associado à lista. | Não |
Erros comuns (Do/Don’t)
❌ Errado — Ações em ``
✅ Correto — Ações separadas
Por quê: list aceita somente texto; ações ficam em rows, cards ou navigator.
❌ Errado — Pipes sem `list $Componente`
✅ Correto — Lista com componente
Por quê: | indica múltiplos valores, e apenas componentes conseguem interpolar %props.
Referências cruzadas
Relacionados
Component Definition: define templates usados emlist $.Component List: amplia listas com dados dinâmicos.Row: posiciona ações relacionadas à lista.Card: delimita contexto e oferece título à lista.
Composições recomendadas
- List + Card + Row-end → resumo textual com ações no rodapé.
- List + Component Definition → coleções ricas baseadas em dados.
- List + Drawer → notas rápidas sem navegar de tela.