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
Acordeão
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. Um valor é gerado automaticamente quando não informado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId('clp') |
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 | --- |
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 | "" |