List

Visão Geral

Design System

Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplos

Básico

Carregando exemplo

Código fonte editável

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Horizontal

Carregando exemplo

Código fonte editável

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. Caso não seja fornecido, um ID gerado automaticamente será usado.
Tipo	string
Valor padrão	br-list-${listId++}

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.

Dependências

Usado por

• br-breadcrumb
• br-footer-category
• br-header-list
• br-pagination
• br-select
• br-skip-link

Depende de

• br-collapse

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