Schede

Le schede sono pulsanti che si trovano sempre in gruppo e dipendono l'uno dallo stato dell'altro: solo uno può essere attivo in un dato momento.

icona di chiamata
Componente Pulsanti
I pulsanti che non sono schede possono funzionare indipendentemente dagli altri pulsanti.

Anatomia

1. Icona della scheda attiva
2. Icona della scheda inattiva
3. Etichetta della scheda attiva
4. Etichetta della scheda inattiva

Specifiche

Schede annidate nella barra delle applicazioni – allineate a sinistra

icona di chiamata
Barra delle applicazioni e componente dell'intestazione
Specifiche, linee guida di stile e altro ancora.

Schede annidate nella barra delle applicazioni: allineamento flessibile

Grazie all'allineamento flessibile, la configurazione delle linguette si allunga o si comprime per adattarsi allo spazio disponibile.

Schede compresse nella barra delle applicazioni – menu del cassetto

icona di chiamata
Barra delle applicazioni e componente dell'intestazione
Specifiche, linee guida di stile e altro ancora.

Barra delle schede autonoma – allineata a sinistra

Barra delle schede autonoma: allineamento flessibile

Grazie all'allineamento flessibile, la configurazione delle linguette si allunga o si comprime per adattarsi allo spazio disponibile.

Overflow della stringa dell'etichetta della scheda

Ridimensionamento dei layout

Questi layout di riferimento mostrano come adattare le schede per adattarsi a schermi di diverse larghezze e altezze. Si noti che tutti i valori dei pixel sono espressi in pixel renderizzati, prima di qualsiasi sottocampionamento o sovracampionamento.

Schermi standard e widescreen nella fascia di altezza ridotta

Schermi standard e widescreen nella fascia di altezza standard

Schermi standard e widescreen nella fascia di altezza elevata

Schermi extra-wide e super-wide in tutte le fasce di altezza

Stili

Tipografia

Stile del tipo Carattere tipografico Peso Dimensioni (dp)
Corpo 3 M Roboto Medio 24
Corpo 3 Roboto Regolare 24

Colore

Elemento Colore (modalità giorno) Colore (modalità notturna)
Tipo primario / icone Bianco Bianco all'88%
Tipo secondario / icone Bianco al 72% Bianco al 60%
Sfondo della barra delle schede Nero Nero
Sfondo della barra delle schede durante lo scorrimento Nero @ 84% Nero all'88%
Icona della scheda - stato attivo Bianco Bianco all'88%
Icona della scheda - stato inattivo Bianco al 56% Bianco al 50%

Dimensionamento

Elemento Dimensioni (dp)
Icona principale 44
Icona secondaria 36
Icona tocca bersaglio 76

Esempi

Le schede sono compresse.


Schede annidate nella barra delle applicazioni.

Barra delle schede autonoma.