List
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Horizontal
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
accordion
| Atributo | accordion |
| Descrição | Indica se a lista possui o comportamento de accordion. O valor da propriedade define o grupo, ou seja, o accordion é aplicado a todas as listas que possuem o mesmo valor para esta propriedade. |
| Tipo | string |
| Valor padrão | null |
collapse
| Atributo | collapse |
| Descrição | Indica se a lista possui o comportamento de collapse. |
| Tipo | boolean |
| Valor padrão | false |
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
header
| Atributo | header |
| Descrição | Define o cabeçalho para a lista. |
| Tipo | string |
| Valor padrão | null |
hideHeaderDivider
| Atributo | hide-header-divider |
| Descrição | Indica que o divider para o título da lista estará oculto. |
| Tipo | boolean |
| Valor padrão | false |
isHorizontal
| Atributo | is-horizontal |
| Descrição | Indica se a lista será horizontal. Por padrão, a lista é vertical. |
| Tipo | boolean |
| Valor padrão | false |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para os itens da lista. |
"header" | Slot para ações ou conteúdo do cabeçalho da lista. |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"container" | Wrapper principal da lista. |
Dependências
Usado por
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|---|---|---|---|
hideTitleDivider | hideHeaderDivider | Oculta o "divider" abaixo do header da lista (título e botões de ação). | boolean | false |
horizontal | isHorizontal | Indica se a lista será horizontal. Por padrão, a lista é vertical. | boolean | false |
title | listTitle | Define o título para a lista. | string | undefined |
🟥 Propriedades removidas
| Propriedade Vue |
|---|
dataToggle |
dataUnique |
density |
spaceBetween |