Tab
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
Alinhamento
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Density
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
alignItemsTab
| Atributo | align-items-tab |
| Descrição | Define o alinhamento horizontal dos itens da tab na barra de navegação. |
| Tipo | "center" | "end" | "start" |
| Valor padrão | 'start' |
colorMode
| Atributo | color-mode |
| Descrição | Define se o Tab usará um esquema de cores escuro. |
| Tipo | "dark" |
| Valor padrão | --- |
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() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
height
| Atributo | height |
| Descrição | Define a altura máxima da área de conteúdo, ativando o scroll interno quando o conteúdo ultrapassa essa altura. |
| Tipo | string |
| Valor padrão | --- |
label
| Atributo | label |
| Descrição | Label de acessibilidade para a navegação das tabs |
| Tipo | string |
| Valor padrão | 'Abas de Navegação' |
scrollDisabled
| Atributo | scroll-disabled |
| Descrição | Desabilita o scroll automático da área de conteúdo. Por padrão, o scroll vertical fica apenas na região de conteúdo. |
| Tipo | boolean |
| Valor padrão | false |
Slots
| Nome | Descrição |
|---|---|
"default" | Slot para inserir os itens das abas (br-tab-item) |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brTabChange | Evento disparado quando um tab é ativado. | true |
Métodos
getActiveTab
| Assinatura | getActiveTab() => Promise<string | undefined> |
| Descrição | Retorna o identificador da aba ativa atual. |
| Parâmetros | --- |
setActiveTab
| Assinatura | setActiveTab(tabId: string) => Promise<void> |
| Descrição | Ativa programaticamente uma aba a partir do seu identificador. |
| Parâmetros | tabId: Identificador da aba (tab-item-id). |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"button" | Botão individual de cada aba. |
"container" | Contêiner principal que envolve toda a estrutura do componente (navegação e conteúdo). Expõe o elemento para customizações de fundo, bordas e espaçamentos globais. |
"content" | Área de conteúdo das abas. |
"indicator" | Indicador visual da aba ativa. |
"nav" | Área de navegação (tablist) onde os botões das abas estão localizados. Permite customizar o alinhamento, espaçamento e plano de fundo da barra de abas. |