As abas são botões que sempre ocorrem em grupos e dependem do estado uns dos outros: apenas uma pode estar ativa em um determinado momento.
Abas
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Anatomia

2. Ícone de guia inativa
3. Rótulo da guia ativa
4. Rótulo da guia inativa
Especificações
Abas aninhadas na barra de aplicativos – alinhadas à esquerda

Abas aninhadas na barra de aplicativos – alinhamento flexível

Abas recolhidas na barra de aplicativos – menu lateral

Barra de abas independente – alinhada à esquerda

Barra de abas independente – alinhamento flexível

estouro de string do rótulo da guia

Dimensionamento de layouts
Esses layouts de referência mostram como adaptar as abas para acomodar telas de diversas larguras e alturas. Observe que todos os valores de pixel estão em pixels renderizados, antes de qualquer redução ou aumento de resolução.
Telas padrão versus telas widescreen em modelos de altura reduzida.

Telas padrão versus telas widescreen em suporte de altura padrão

Telas padrão versus telas widescreen na categoria de altura alta

Telas extralargas e superlargas em todas as faixas de altura.

Estilos
Tipografia
| Estilo de digitação | Tipo de letra | Peso | Tamanho (dp) |
|---|---|---|---|
| Corpo 3 M | Robô | Médio | 24 |
| Corpo 3 | Robô | Regular | 24 |
Cor
| Elemento | Cor (modo diurno) | Cor (modo noturno) |
|---|---|---|
| Tipo principal / ícones | Branco | Branco @ 88% |
| Tipo secundário / ícones | Branco @ 72% | Branco @ 60% |
| Fundo da barra de abas | Preto | Preto |
| Fundo da barra de abas ao rolar | Preto @ 84% | Preto @ 88% |
| Ícone da aba - estado ativo | Branco | Branco @ 88% |
| Ícone da aba - estado inativo | Branco @ 56% | Branco @ 50% |
Tamanhos
| Elemento | Tamanho (dp) |
|---|---|
| Ícone principal | 44 |
| Ícone secundário | 36 |
| Alvo de toque do ícone | 76 |
Exemplos


