Le schede sono pulsanti che si trovano sempre in gruppi e dipendono dal loro stato: solo uno alla volta può essere attivo.
Anatomia
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-anatomy-1.png?authuser=2&hl=it)
2. Icona della scheda Non attiva
3. Etichetta della scheda attiva
4. Etichetta della scheda non attiva
Specifiche
Schede nidificate nella barra dell'app - allineate a sinistra
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-1.png?authuser=2&hl=it)
Schede nidificate nella barra dell'app – allineamento flessibile
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-3.png?authuser=2&hl=it)
Schede compresse nella barra dell'app - menu a scomparsa
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-4.png?authuser=2&hl=it)
Barra delle schede autonoma - allineata a sinistra
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-6.png?authuser=2&hl=it)
Barra delle schede autonoma – allineamento flessibile
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-5.png?authuser=2&hl=it)
Overflow della stringa dell'etichetta della scheda
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-2.png?authuser=2&hl=it)
Layout di scalabilità
Questi layout di riferimento mostrano come adattare le schede per adattarle a schermi di varie larghezze e altezze. Le categorie di larghezza e altezza sono definite nella sezione Layout. Tieni presente che tutti i valori dei pixel vengono visualizzati in pixel sottoposti a rendering, prima che si verifichi qualsiasi down-sampling o up-sampling.
Schermi standard e larghi in parentesi quadra di altezza ridotta
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-1.png?authuser=2&hl=it)
Schermi standard e schermi larghi nella parentesi quadra di altezza standard
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-2.png?authuser=2&hl=it)
Schermi standard e larghi nella fascia alta
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-3.png?authuser=2&hl=it)
Schermi larghi e molto larghi con tutte le parentesi di altezza
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-4.png?authuser=2&hl=it)
Stili
Tipografia
Stile tipo | Tipo di carattere | Peso | Dimensioni (dp) |
---|---|---|---|
Corpo 3 M | Roboto | Medium | 24 |
Corpo 3 | Roboto | Periodici | 24 |
Colore
Elemento | Colore(modalità giorno) | Colore (modalità notturna) |
---|---|---|
Tipo principale / icone | di colore bianco | Bianco all'88% |
Tipo secondario / icone | Bianco @ 72% | Bianco @ 60% |
Sfondo della barra delle schede | di colore nero | di colore nero |
Sfondo della barra delle schede quando si scorre | Nero all'84% | Nero all'88% |
Icona scheda - stato attivo | di colore bianco | Bianco all'88% |
Icona della scheda - stato non attivo | Bianco @ 56% | Bianco al 50% |
Taglie
Elemento | Dimensioni (dp) |
---|---|
Icona principale | 44 |
Icona secondaria | 36 |
Touch target icona | 76 |
Esempi
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-1.png?authuser=2&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-3.png?authuser=2&hl=it)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-2.png?authuser=2&hl=it)