TabNav / Tabs

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O componente Tabs organiza conteúdos relacionados em grupos distintos, permitindo a alternância entre eles sem sair da página atual. É composto por um conjunto de Tab Items que servem como gatilhos de navegação interna.

Diretrizes de Comportamento (Tab Items)

Rótulos Concisos: Use apenas substantivos ou verbos curtos. Use Caixa de Título.
- Exemplo: Visão Geral, Ocorrências, Custos.
Estado Ativo: Apenas um Tab Item pode estar ativo por vez. Ele deve ter um destaque visual (cor ou borda inferior) e o texto em negrito.
Ordem Lógica: Coloque as informações mais críticas na primeira aba (à esquerda).
Sem Pontuação: Nunca utilize ponto final nos rótulos das abas.
Ícones de Apoio: Utilize ícones que possuam semântica direta com o conteúdo da aba. O ícone deve ser posicionado à esquerda do rótulo.
Modo Compacto (Responsivo): Em telas menores, o rótulo de texto pode ser ocultado, mantendo apenas o ícone.
Uso de Tooltip: Sempre que o rótulo de texto for ocultado no modo compacto, o uso de Tooltip no ícone torna-se obrigatório para descrever a função da aba.
- Exemplo: Ícone de caminhão → Tooltip: Rastreamento.
Consistência: Não misture abas com ícones e abas sem ícones no mesmo conjunto. Se uma aba possui ícone, todas as outras do mesmo grupo devem possuir.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`activeIndex`	—	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-nav-tabs`
Elementos	`.mds-nav-tabs__item` `.mds-nav-tabs__item__icon` `.mds-nav-tabs__item__icon__content` `.mds-nav-tabs__item__text` `.mds-nav-tabs__list` `.mds-nav-tabs__marker` `.mds-nav-tabs__wrap`
Modificadores	`.mds-nav-tabs__item--active` `.mds-nav-tabs--bottom` `.mds-nav-tabs--dark` `.mds-nav-tabs--light` `.mds-nav-tabs--main` `.mds-nav-tabs--sm` `.mds-nav-tabs--submenu` `.mds-nav-tabs--xs`

Angular (mds-angular)

`nav[mdsNavTabs]`

As abas são usadas para organizar o conteúdo agrupando informações semelhantes na mesma página.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`'d-flex align-items-center'`	Classe CSS customizada adicionada ao host
`position`	`MdsNavTabsPositions`	`'top'`	—
`isSubmenu`	`boolean`	`false`	—
`variant`	`'default' \| 'light' \| 'main' \| 'dark'`	`'default'`	—
`size`	`MdsSizesSmall`	`'md'`	—
`align`	`'left' \| 'center' \| 'right'`	`'left'`	—
`additionalClass`	`string`	`''`	—

Slots

Conteúdo projetado com o atributo data-position:

data-position="before"
data-position="after"

`li[mdsNavTabsItem]`

As abas são usadas para organizar o conteúdo agrupando informações semelhantes na mesma página.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`href`	`string`	`''`	Link da aba
`icon`	`MdsIconAlias \| any[] \| string`	`''`	Ícone da aba
`notify`	`boolean`	`false`	Exibe badge de notificação
`qtdnotify`	`string \| number`	`''`	Exibe valor de notificações
`title`	`string`	`''`	Titulo da aba
`label` ⇄	`string`	`''`	Label da aba
`routerLink`	`any`	`undefined`	Router inputs
`routerLinkActiveOptions`	`IsActiveMatchOptions \| { exact: boolean }`	`{ exact: false }`	—
`active` ⇄	`boolean`	`false`	Aba ativa (bidirecional)
`hideLabelMobile`	`boolean`	`true`	Esconde o label em tela pequena

⇄ = binding bidirecional ([(input)]).

Visão ao vivo

TabNav / Tabs — Figma (Design System 2.0) ↗

Componentes relacionados

Tooltip