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
Propriedades
caption
| |
|---|
| Atributo | caption |
| Descrição | Texto exibido como título do cabeçalho. |
| Tipo | string |
| Valor padrão | null |
captionUrl
| |
|---|
| Atributo | caption-url |
| Descrição | URL associada ao título do cabeçalho. |
| Tipo | string |
| Valor padrão | null |
customId
| |
|---|
| Atributo | custom-id |
| Descrição | Identificador único do cabeçalho; gerado automaticamente quando omitido. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| |
|---|
| Atributo | density |
| Descrição | Densidade do cabeçalho: controla espaçamento e proporções. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
isCompact
| |
|---|
| Atributo | is-compact |
| Descrição | Ativa o modo compacto do cabeçalho. |
| Tipo | boolean |
| Valor padrão | false |
isSticky
| |
|---|
| Atributo | is-sticky |
| Descrição | Fixa o cabeçalho no topo durante a rolagem. |
| Tipo | boolean |
| Valor padrão | false |
shrinkFirst
| |
|---|
| Atributo | shrink-first |
| Descrição | Define qual lista encolhe primeiro quando o espaço é limitado. |
| Tipo | "functions" | "links" |
| Valor padrão | 'functions' |
signature
| |
|---|
| Atributo | signature |
| Descrição | Texto da assinatura exibida ao lado da logo. |
| Tipo | string |
| Valor padrão | null |
subcaption
| |
|---|
| Atributo | subcaption |
| Descrição | Texto exibido como subtítulo do cabeçalho. |
| Tipo | string |
| Valor padrão | null |
subcaptionUrl
| |
|---|
| Atributo | subcaption-url |
| Descrição | URL associada ao subtítulo do cabeçalho. |
| Tipo | string |
| Valor padrão | null |
Slots
| Nome | Descrição |
|---|
"access" | Slot para o botão de acesso ou autenticação. |
"caption" | Slot para o título do cabeçalho. |
"functions" | Slot para botões de ação no cabeçalho. |
"links" | Slot para links de navegação principais. |
"logo" | Slot para a logo do cabeçalho. |
"menu-trigger" | Slot para o botão que abre o menu. |
"search" | Slot para o campo de busca. |
"signature" | Slot para a assinatura visual da organização. |
"subcaption" | Slot para o subtítulo do cabeçalho. |
Eventos
| Evento | Descrição | Propagação |
|---|
headerCompactChange | Evento disparado quando o cabeçalho entra ou sai do modo compacto. O evento contém os detalhes do estado compacto e o ID do componente pai. | true |
headerWidthChange | Evento disparado para indicar qual lista deve encolher primeiro. O evento contém os detalhes do ID do componente pai e o nome da lista. | true |
Métodos
| |
|---|
| Assinatura | resetHeaderList() => Promise<void> |
| Descrição | Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento.
Pode ser chamado externamente para forçar a atualização das listas. |
| Parâmetros | --- |
Dependências
Subcomponentes
Depende de
Gráfico
Migração: Vue 1.x → Stencil 2.x
Propriedades
🟦 Propriedades renomeadas
| Propriedade Vue | Propriedade Stencil | Descrição | Tipo | Padrão |
|---|
compact | is-compact | Indica se deve ser exibido em modo compacto. | boolean | false |
density | density | Indica a densidade. | "large" | "medium" | "small" | 'medium' |
subtitle | subcaption | Indica o texto exibido como subtítulo. | string | null |
title-link-url | caption-url | Indica a URL associada ao título. | string | null |
title | caption | Indica o texto exibido como título. | string | null |
🟥 Propriedades removidas
| Propriedade | Descrição | Tipo | Padrão |
|---|
action-search | Propriedade removida. | --- | --- |
has-menu | Propriedade removida. | --- | --- |
has-search | Propriedade removida. | --- | --- |
has-title-link | Propriedade removida. | --- | --- |
image | Propriedade removida. | --- | --- |
label-search | Propriedade removida. | --- | --- |
name-input-search | Propriedade removida. | --- | --- |
placeholder-search | Propriedade removida. | --- | --- |
value-input-search | Propriedade removida. | --- | --- |