Las pestañas son botones que siempre aparecen en grupos y dependen del estado del otro: solo uno puede estar activo a la vez.
Anatomía
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-anatomy-1.png?authuser=4&hl=es-419)
2. Ícono de pestaña inactiva
3. Etiqueta de pestaña activa
4. Etiqueta de pestaña inactiva
Especificaciones
Pestañas anidadas en la barra de la aplicación: alineadas a la izquierda
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-1.png?authuser=4&hl=es-419)
Pestañas anidadas en la barra de la aplicación: alineación flexible
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-3.png?authuser=4&hl=es-419)
Pestañas contraídas en la barra de la aplicación (menú del panel lateral)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-4.png?authuser=4&hl=es-419)
Barra de pestañas independiente, alineada a la izquierda
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-6.png?authuser=4&hl=es-419)
Barra de pestañas independiente: alineación flexible
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-5.png?authuser=4&hl=es-419)
Desbordamiento de cadena de etiqueta de pestaña
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-2.png?authuser=4&hl=es-419)
Cómo ajustar diseños
Estos diseños de referencia muestran cómo adaptar pestañas para adaptarse a pantallas de varios anchos y alturas. Las categorías de ancho y altura se definen en la sección Diseño. Ten en cuenta que todos los valores de píxeles están en píxeles renderizados, antes de que se realice cualquier reducción o sobremuestreo.
Pantallas estándar frente a pantallas anchas y con corchetes de altura cortos
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-1.png?authuser=4&hl=es-419)
Pantallas estándar frente a pantallas anchas en corchetes de altura estándar
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-2.png?authuser=4&hl=es-419)
Pantallas estándar frente a pantallas anchas y con paréntesis de altura alto
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-3.png?authuser=4&hl=es-419)
Pantallas extraanchos y superanchos en todos los corchetes de altura
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-4.png?authuser=4&hl=es-419)
Estilos
Tipografía
Estilo de la tipografía | Tipo de letra | Peso | Tamaño (dp) |
---|---|---|---|
Cuerpo 3 M | Roboto | Medio | 24 |
Cuerpo 3 | Roboto | Normal | 24 |
Color
Elemento | Color(modo diurno) | Color (modo nocturno) |
---|---|---|
Tipo principal / íconos | White | Blanco @ 88% |
Íconos y tipo secundario | Blanco al 72% | Blanco al 60% |
Fondo de la barra de pestañas | Negro | Negro |
Fondo de la barra de pestañas al desplazarse | Negro 84% | Negro 88% |
Ícono de pestaña: estado activo | White | Blanco @ 88% |
Ícono de pestaña: Estado inactivo | Blanco @ 56% | Blanco al 50% |
Tamaño
Elemento | Tamaño (dp) |
---|---|
Ícono principal | 44 |
Ícono secundario | 36 |
Ícono del objetivo táctil | 76 |
Ejemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-1.png?authuser=4&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-3.png?authuser=4&hl=es-419)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-2.png?authuser=4&hl=es-419)