Abas
As abas organizam o conteúdo em várias seções e permitem que os usuários naveguem entre elas.
O conteúdo sob o conjunto de guias deve estar relacionado e formar uma unidade coerente.
Opções
#Etiqueta
- Os itens das abas devem ter uma etiqueta para acessibilidade;
- Se um rótulo não estiver presente, ele deverá incluir um ícone e se tornar um item de guia somente de ícone.
#Ícones
- Os ícones podem ser exibidos nos itens das abas;
- Os ícones só devem ser usados em um item de abas quando absolutamente necessário: ao agregar valor essencial e ter uma forte associação com a etiqueta;
- Ícones não devem ser usados apenas como decoração;
- Se o item da aba não tiver um rótulo visível, ele ainda deverá ter uma dica de ferramenta para divulgar o rótulo.
#Aba selecionada
- Um item de aba em um estado selecionado mostra o item de aba atual;
- Isso é mostrado com um preenchimento do fundo (na mesma cor da linha que acompanha a sua largura).
#Desativado
- Um item de aba em um estado desabilitado mostra que o item de aba existe, mas não está disponível nessa circunstância;
- Esse estado pode ser usado para manter a continuidade do layout e para comunicar que o item da aba pode ficar disponível posteriormente.
#Tamanho
- As guias vêm em quatro tamanhos diferentes: pequeno, médio, grande e extragrande;
- O tamanho médio é a opção padrão e mais usada;
- Use os outros tamanhos com moderação; eles devem ser usados para criar uma hierarquia de importância dentro da página.
#Ênfase
- Por padrão, as abas não são enfatizadas;
- Isso é ideal para quando o componente não é a parte principal de uma interface;
- As abas enfatizadas têm texto branco com preenchimento verde para o estado selecionado para destaque visual e para chamar mais atenção para elas;
- Isso é ideal para quando a seleção deve chamar a atenção.
#Orientação
- As abas podem ser horizontais ou verticais;
- Por padrão, as abas são horizontais e devem ser usadas quando o espaço horizontal for limitado;
- As abas verticais devem ser usadas quando o espaço horizontal é mais apertado e quando a lista de seções é maior do que pode ser apresentada ao usuário em formato horizontal.