Tab
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
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Alinhamento
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Density
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. - 'start': Alinha à esquerda - 'center': Centraliza - 'end': Alinha à direita |
| 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. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | A propriedade 'density' define a densidade do componente. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
label
| Atributo | label |
| Descrição | Label de acessibilidade para a navegação das tabs |
| Tipo | string |
| Valor padrão | 'Abas de Navegação' |
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 |