Categorias e Tabs

As Categorias, Tabs e Abas são componentes projetados para organizar informações e facilitar a navegação entre diferentes seções de uma interface. No Acronos Design System, elas foram desenvolvidas para oferecer uma experiência intuitiva, fluida e visualmente consistente.

Tipos de Tabs

Tabs em Cards

Tabs em formato de cards são usadas para criar divisões visuais claras e destacar categorias relacionadas dentro de blocos ou painéis.

• Uso:
  Ideal para painéis de controle, dashboards e agrupamentos rápidos de informações.

• Estilo Visual:

  • Tabs destacadas em contêineres com bordas suaves e espaçamento uniforme.

  • Feedback visual ao selecionar uma aba.

• Interações:
  Incluem transições suaves de estado, com animação de 300ms utilizando o padrão smart animate, ease-out.

Tabs em Páginas

Tabs em formato de páginas são ideais para seções que demandam mais espaço e foco no conteúdo ativo.

• Uso:
  Recomendadas para navegação entre seções de conteúdo extenso, como guias ou etapas de um fluxo.

• Estilo Visual:

  • Indicadores visuais como sublinhados dinâmicos ou barras de progresso para destacar a aba ativa.

  • Organização horizontal que facilita a leitura e mantém o foco.

• Interações:
  Resposta visual clara em ações de hover e ao selecionar uma aba.

Tamanhos e Espaçamentos

Tamanhos Disponíveis

As Tabs são configuradas em três tamanhos principais, adaptando-se aos diferentes contextos:

• Medium (Médio):
  O tamanho padrão, ideal para a maioria dos cards.

• Large (Grande):
  Maior visibilidade e ênfase, usado principalmente em cabeçalhos ou áreas principais para as páginas.

Espaçamentos

Os espaçamentos entre Tabs seguem um padrão progressivo, garantindo organização e legibilidade, mesmo em dispositivos menores.

Boas Práticas

• Mantenha a simplicidade:
  Evite sobrecarregar com muitas categorias; prefira até 4 ou 5 tabs por seção.

• Priorize clareza:
  Os rótulos devem ser curtos, objetivos e fáceis de compreender.

• Acessibilidade:
  Garanta contraste suficiente entre as abas para que sejam visíveis para todos os usuários.

• Responda ao contexto:
  Em dispositivos móveis, permita o uso de scroll horizontal se necessário para acomodar múltiplas categorias sem comprometer a experiência.

Categorias e Tabs no Acronos Design System foram criadas para equilibrar usabilidade, estética e funcionalidade, permitindo a navegação eficiente e fluida em qualquer contexto de aplicação.