Pular para o conteúdo principal

Tabs​

Componente Tabs

📘 Modo de Uso​

O componente Tabs organiza conteúdo em diferentes painéis, acessíveis por meio de guias (abas).
Ele facilita a navegação entre seções relacionadas de forma compacta e intuitiva, permitindo que o usuário visualize apenas um conjunto de informações por vez.

É indicado para:

  • Exibir categorias de conteúdo dentro da mesma página;
  • Agrupar informações relacionadas, sem sobrecarregar a tela;
  • Melhorar a navegação em dashboards e áreas administrativas.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.navigation.component.tabs

🛡️ Boas Práticas e Acessibilidade​

  • Mantenha nomes curtos e claros para as abas (1–2 palavras).
  • Indique visualmente qual aba está ativa (cor, peso da fonte ou sublinhado).
  • Use navegação por teclado:
    • Tab para entrar na lista de abas;
    • Setas para alternar entre elas;
    • Enter ou Espaço para ativar a aba selecionada.
  • Certifique-se de que apenas o conteúdo da aba ativa esteja visível para leitores de tela (WCAG 2.1 - 4.1.2 Nome, Função, Valor).
  • Evite usar muitas abas. Se houver mais de 6, considere uma navegação alternativa (accordion, side nav ou dropdown).