Collapse
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
Acordeão
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
accordionGroup
| Atributo | accordion-group |
| Descrição | Identifica o grupo de accordion; quando informado, mantém apenas um item aberto por vez no mesmo grupo. |
| Tipo | string |
| Valor padrão | null |
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() |
iconPosition
| Atributo | icon-position |
| Descrição | Define a posição do ícone no acionador: 'left' ou 'right'. |
| Tipo | "left" | "right" |
| Valor padrão | 'right' |
iconToHide
| Atributo | icon-to-hide |
| Descrição | Classe CSS do ícone exibido quando o conteúdo está visível. |
| Tipo | string |
| Valor padrão | 'fa6-solid:chevron-up' |
iconToShow
| Atributo | icon-to-show |
| Descrição | Classe CSS do ícone exibido quando o conteúdo está oculto. |
| Tipo | string |
| Valor padrão | 'fa6-solid:chevron-down' |
open
| Atributo | open |
| Descrição | Controla se o collapse está aberto. |
| Tipo | boolean |
| Valor padrão | false |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para o conteúdo expansível exibido ao abrir o collapse. |
"trigger" | Slot para personalizar o acionador (texto, ícones, imagens, etc.). |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidClose | Emitido ao recolher, com o identificador e o grupo de accordion. | true |
brDidOpen | Emitido ao expandir, com o identificador e o grupo de accordion. | true |
Métodos
closeCollapse
| Assinatura | closeCollapse() => Promise<void> |
| Descrição | Fecha o collapse programaticamente. |
| Parâmetros | --- |
openCollapse
| Assinatura | openCollapse() => Promise<void> |
| Descrição | Abre o collapse programaticamente. |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"content" | Área de conteúdo expansível. |
"details" | Elemento details nativo do collapse. |
"trigger" | Acionador (summary) do collapse. |
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 |
|---|---|---|---|---|
collapsed | open | Define se o collapse está aberto ou fechado. | boolean | false |
id | custom-id | Identificador único. | string | Helpers.generateUniqueId('clp') |
nameIconCollapsed | icon-to-hide | Classe CSS para o ícone de recolhimento. | string | 'fa6-solid:chevron-up' |
nameIconNotCollapsed | icon-to-show | Classe CSS para o ícone de expansão. | string | 'fa6-solid:chevron-down' |
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|---|---|---|
showIcon | Determina se o ícone deve ser exibido. | boolean | false |
title | Título do collapse (usar slots). | string | "" |