Abas vs. Controle Segmentado
As abas alternam entre seções de conteúdo. Um controle segmentado altera um modo, filtro ou valor pequeno na mesma visualização.
Use abas para seções de conteúdo separadas. Use um controle segmentado para poucas opções curtas que mudam o mesmo conteúdo.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Abas
Abas usam rótulos para alternar o conteúdo em um painel compartilhado. A tarefa principal continua aberta.
Visão geral, Atividade e Permissões mudam o painel abaixo enquanto o mesmo projeto permanece aberto.
- Use-o quando
- Use abas para algumas seções no mesmo nível quando seus rótulos devem permanecer visíveis.
- Não o use quando
- Nunca use guias como pequenos links para páginas que não têm relação entre si.
- Nome usado no código
role="tablist"
Grupo de alternância
Um grupo com label de botões de liga-desliga. Uma ou mais opções separadas podem continuar apertadas.
Um editor de texto deixa o Bold e o Italic ligados ao mesmo tempo. Cada botão avisa se está pressionado.
- Use-o quando
- Use-o para alguns modos pequenos e reversíveis cujos estados atuais devem permanecer visíveis.
- Não o use quando
- Use botões de opção quando apenas uma escolha puder ser enviada. Use caixas de seleção para escolhas normais de formulário.
- Nome usado no código
button[aria-pressed] in a labeled group
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| AbasTabs | Use abas para algumas seções no mesmo nível quando seus rótulos devem permanecer visíveis. | Nunca use guias como pequenos links para páginas que não têm relação entre si. | role="tablist" |
| Grupo de alternânciaToggle Group | Use-o para alguns modos pequenos e reversíveis cujos estados atuais devem permanecer visíveis. | Use botões de opção quando apenas uma escolha puder ser enviada. Use caixas de seleção para escolhas normais de formulário. | button[aria-pressed] in a labeled group |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Abas (Tabs), Grupo de alternância (Toggle Group) para o nosso fluxo real de usuário. Use esta regra: As abas alternam entre seções de conteúdo. Um controle segmentado altera um modo, filtro ou valor pequeno na mesma visualização. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.