Guias são botões que sempre ocorrem em grupos e dependem do estado uns dos outros: somente um pode estar ativo por vez.
Anatomia
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-anatomy-1.png?authuser=6&hl=pt-br)
2. Ícone da guia inativa
3. Rótulo da guia ativa
4. Rótulo da guia inativa
Especificações
Guias aninhadas na barra de apps: alinhadas à esquerda
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-1.png?authuser=6&hl=pt-br)
Guias aninhadas na barra de apps: alinhamento flexível
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-3.png?authuser=6&hl=pt-br)
Guias recolhidas na barra de apps: menu de gaveta
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-4.png?authuser=6&hl=pt-br)
Barra de guias autônoma: alinhada à esquerda
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-6.png?authuser=6&hl=pt-br)
Barra de guias autônoma: alinhamento flexível
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-5.png?authuser=6&hl=pt-br)
Excesso de strings de rótulos de guia
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-2.png?authuser=6&hl=pt-br)
Dimensionamento de layouts
Esses layouts de referência mostram como adaptar guias para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de ocorrer qualquer diminuição ou aumento de amostragem.
Telas padrão x amplas no colchete de altura curto
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-1.png?authuser=6&hl=pt-br)
Telas padrão x amplas no colchete de altura padrão
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-2.png?authuser=6&hl=pt-br)
Telas padrão x amplas no colchete de altura alto
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-3.png?authuser=6&hl=pt-br)
Telas muito largas e superlargas em todos os colchetes de altura
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-4.png?authuser=6&hl=pt-br)
Estilos
Tipografia
Estilo de fonte | Fonte | Peso | Tamanho (dp) |
---|---|---|---|
Corpo 3 M | Roboto | Médio | 24 |
Texto 3 | Roboto | Normal | 24 |
Cor
Elemento | Cor(modo diurno) | Cor (modo noturno) |
---|---|---|
Tipo principal / ícones | Branco | Branco @ 88% |
Tipo secundário / ícones | Branco @ 72% | Branco a 60% |
Plano de fundo da barra de guias | Preto | Preto |
Plano de fundo da barra de guias ao rolar | Preto @ 84% | Preto @ 88% |
Ícone de guia: estado ativo | Branco | Branco @ 88% |
Ícone de guia: estado inativo | Branco @ 56% | Branco a 50% |
Tamanho
Elemento | Tamanho (dp) |
---|---|
Ícone principal | 44 |
Ícone secundário | 36 |
Área de toque do ícone | 76 |
Exemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-1.png?authuser=6&hl=pt-br)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-3.png?authuser=6&hl=pt-br)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-2.png?authuser=6&hl=pt-br)