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
Abas
Propriedades
closeOnOutsideClick
| |
|---|
| Atributo | close-on-outside-click |
| Descrição | Fecha o painel ao clicar fora da superfície. |
| Tipo | boolean |
| Valor padrão | true |
closeOnTriggerClick
| |
|---|
| Atributo | close-on-trigger-click |
| Descrição | Fecha o painel ao clicar novamente no acionador. |
| Tipo | boolean |
| Valor padrão | true |
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() |
| |
|---|
| Atributo | internal-scroll |
| Descrição | Habilita rolagem apenas na região de itens, preservando cabeçalho e abas fixos. |
| Tipo | boolean |
| Valor padrão | true |
isStatic
| |
|---|
| Atributo | is-static |
| Descrição | Define se o painel de notificações deve ser renderizado de forma estática (inline).
Quando verdadeiro, o posicionamento absoluto é desativado. Ideal para centrais de notificações fixas ou documentação. |
| Tipo | boolean |
| Valor padrão | false |
label
| |
|---|
| Atributo | label |
| Descrição | Nome acessível do painel de notificações. Exposto via aria-label. (obrigatório) |
| Tipo | string |
| Valor padrão | --- |
maxHeight
| |
|---|
| Atributo | max-height |
| Descrição | Sobrescreve a altura máxima do painel.
Por padrão, o CSS aplica calc(100vh - 86px) via token --notification-height. |
| Tipo | string |
| Valor padrão | --- |
maxWidth
| |
|---|
| Atributo | max-width |
| Descrição | Sobrescreve o max-width do painel. Por padrão, o CSS aplica max-width: 50vw em viewports ≥576px
conforme a especificação do Design System. |
| Tipo | string |
| Valor padrão | --- |
mobileFullscreen
| |
|---|
| Atributo | mobile-fullscreen |
| Descrição | Faz o painel ocupar toda a largura disponível em viewports pequenas. |
| Tipo | boolean |
| Valor padrão | true |
open
| |
|---|
| Atributo | open |
| Descrição | Controla se o painel de notificações está aberto. |
| Tipo | boolean |
| Valor padrão | false |
placement
| |
|---|
| Atributo | placement |
| Descrição | Define o posicionamento do painel em relação ao acionador. |
| Tipo | "bottom-end" | "bottom-start" | "top-end" | "top-start" |
| Valor padrão | 'bottom-end' |
width
| |
|---|
| Atributo | width |
| Descrição | Largura explícita do painel. Quando não definida, o painel dimensiona conforme o conteúdo,
respeitando o max-width definido por spec ou pelo prop maxWidth. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|
"default" | Região principal da lista de notificações. |
"footer" | Região opcional para ações complementares, como "ver todas". |
"header" | Região superior do componente, para uso com subcomponentes de cabeçalho ou conteúdo customizado. |
"tabs" | Região opcional para navegação por abas. |
"trigger" | Elemento acionador externo responsável por abrir e fechar o painel. |
Eventos
| Evento | Descrição | Propagação |
|---|
brNotificationClose | Informa que o painel foi fechado. | true |
brNotificationItemClick | Expõe a interação com um item da lista. | true |
brNotificationOpen | Informa que o painel foi aberto. | true |
brNotificationTabChange | Informa troca de aba quando o componente possuir navegação por tabs. | true |
brOpenChange | Informa a mudança de estado aberto/fechado do painel. | true |
Métodos
focusFirstItem
| |
|---|
| Assinatura | focusFirstItem() => Promise<void> |
| Descrição | Move o foco para o primeiro item interativo da lista. |
| Parâmetros | --- |
focusTrigger
| |
|---|
| Assinatura | focusTrigger() => Promise<void> |
| Descrição | Move o foco de volta para o acionador. |
| Parâmetros | --- |
hide
| |
|---|
| Assinatura | hide(reason?: NotificationCloseReason) => Promise<void> |
| Descrição | Fecha o painel de notificações. |
| Parâmetros | reason: |
show
| |
|---|
| Assinatura | show() => Promise<void> |
| Descrição | Abre o painel de notificações. |
| Parâmetros | --- |
toggle
| |
|---|
| Assinatura | toggle() => Promise<void> |
| Descrição | Alterna o estado aberto/fechado. |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|
"base" | Superfície principal do painel. |
"body" | Região principal do componente. |
"close-button" | Botão de fechar do painel. |
"divider" | Divisor entre itens da lista. |
"footer" | |
"header" | Região superior do componente. |
"list" | Região com rolagem onde os itens são exibidos. |
"tabs" | Região de abas, quando existir. |
Dependências
Subcomponentes
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Novas propriedades
| Propriedade | Descrição | Tipo | Padrão |
|---|
Eventos
🟦 Eventos renomeados
| Evento Vue | Evento Stencil | Descrição |
|---|
🟥 Eventos removidos
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Novos eventos
Slots
🟦 Slots renomeados
| Slot Vue | Slot Stencil | Descrição |
|---|
🟥 Eventos removidos
| Propriedade | Descrição | Tipo | Padrão |
|---|
🟩 Slots criados
