TabNav / Tabs
- Angular:
nav[mdsNavTabs] - CSS/HTML (mds-styles): NavTabs
- Figma: ✅ — abrir Design System 2.0 ↗ (busque pelo frame “Menu_tab” dentro do arquivo)
- Tipo: Core
Definição Funcional
Seção intitulada “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)
Seção intitulada “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.