Visualização não disponível para mobile
Esse conteúdo foi preparado para ser visualizado exclusivamente em um computador.
O componente Tabs é utilizado para organizar e alternar entre seções de conteúdo relacionadas no mesmo espaço. Ele permite uma navegação rápida entre diferentes painéis de informações, sem sair da página atual.
Príncipios de design
- Clareza: As abas devem comunicar claramente qual conteúdo será exibido.
- Foco: Usado para alternar conteúdos que compartilham contexto ou categoria.
- Eficiência: Reduz a carga cognitiva ao evitar rolagens longas ou múltiplas páginas.
Variações
Variações
- Abas com texto: Forma padrão com rótulo textual claro.
- Abas com ícones: Ícone pode ser usado com ou sem texto para reforçar o significado.
- Underline: Indicação visual da aba ativa com linha inferior.
- Tab preenchida: Aba ativa com fundo destacado (ex: modo escuro ou contrastado).
- Scrollável: Quando há muitas abas, permite rolar horizontalmente.
- Vertical: Layout de abas na lateral (comum em configurações).
Variações
Variações
- Abas com texto: Forma padrão com rótulo textual claro.
- Abas com ícones: Ícone pode ser usado com ou sem texto para reforçar o significado.
- Underline: Indicação visual da aba ativa com linha inferior.
- Tab preenchida: Aba ativa com fundo destacado (ex: modo escuro ou contrastado).
- Scrollável: Quando há muitas abas, permite rolar horizontalmente.
- Vertical: Layout de abas na lateral (comum em configurações).
Exemplos de uso
- Formulários divididos em etapas (ex: Cadastro, Endereço, Pagamento).
- Perfis com seções como "Dados", "Histórico", "Atendimentos".
- Painéis de administração com múltiplas seções rápidas.
- Dashboards com múltiplos gráficos.
Do's and Don'ts
✅ Use rótulos curtos e significativos.
✅ Priorize a ordem de uso esperado ou importância.
✅ Indique claramente a aba ativa.
✅ Utilize animação sutil na transição para reforçar a mudança de contexto.
🚫 Usar abas para conteúdos não relacionados.
🚫 Não indicar qual aba está ativa.
🚫 Usar rótulos genéricos como "Aba 1", "Seção A".
Acessibilidade
- Cada aba deve ter um foco visível (outline ou realce).
- Use atributos aria-controls e aria-selected corretamente quando implementado.
- Atalhos de teclado devem ser suportados: setas para navegar, tab para focar conteúdo.
Decisões de design
- Abas com underline foram escolhidas por sua leveza e clareza.
- O alinhamento horizontal é padrão, com variação vertical para casos com hierarquia lateral.
- Ícones são permitidos como reforço visual, mas não substituem texto quando o significado não for óbvio.
Tabs ( C_Tabs)
O componente Tabs é utilizado para organizar e alternar entre seções de conteúdo relacionadas no mesmo espaço. Ele permite uma navegação rápida entre diferentes painéis de informações, sem sair da página atual.
Príncipios de design
- Clareza: As abas devem comunicar claramente qual conteúdo será exibido.
- Foco: Usado para alternar conteúdos que compartilham contexto ou categoria.
- Eficiência: Reduz a carga cognitiva ao evitar rolagens longas ou múltiplas páginas.
Variações
Variações
- Abas com texto: Forma padrão com rótulo textual claro.
- Abas com ícones: Ícone pode ser usado com ou sem texto para reforçar o significado.
- Underline: Indicação visual da aba ativa com linha inferior.
- Tab preenchida: Aba ativa com fundo destacado (ex: modo escuro ou contrastado).
- Scrollável: Quando há muitas abas, permite rolar horizontalmente.
- Vertical: Layout de abas na lateral (comum em configurações).
Variações
Variações
- Abas com texto: Forma padrão com rótulo textual claro.
- Abas com ícones: Ícone pode ser usado com ou sem texto para reforçar o significado.
- Underline: Indicação visual da aba ativa com linha inferior.
- Tab preenchida: Aba ativa com fundo destacado (ex: modo escuro ou contrastado).
- Scrollável: Quando há muitas abas, permite rolar horizontalmente.
- Vertical: Layout de abas na lateral (comum em configurações).
Exemplos de uso
- Formulários divididos em etapas (ex: Cadastro, Endereço, Pagamento).
- Perfis com seções como "Dados", "Histórico", "Atendimentos".
- Painéis de administração com múltiplas seções rápidas.
- Dashboards com múltiplos gráficos.
Do's and Don'ts
✅ Use rótulos curtos e significativos.
✅ Priorize a ordem de uso esperado ou importância.
✅ Indique claramente a aba ativa.
✅ Utilize animação sutil na transição para reforçar a mudança de contexto.
🚫 Usar abas para conteúdos não relacionados.
🚫 Não indicar qual aba está ativa.
🚫 Usar rótulos genéricos como "Aba 1", "Seção A".
Acessibilidade
- Cada aba deve ter um foco visível (outline ou realce).
- Use atributos aria-controls e aria-selected corretamente quando implementado.
- Atalhos de teclado devem ser suportados: setas para navegar, tab para focar conteúdo.
Decisões de design
- Abas com underline foram escolhidas por sua leveza e clareza.
- O alinhamento horizontal é padrão, com variação vertical para casos com hierarquia lateral.
- Ícones são permitidos como reforço visual, mas não substituem texto quando o significado não for óbvio.