Onglets

Les onglets sont des boutons qui apparaissent toujours en groupes et qui dépendent de l'état des uns et des autres : un seul peut être actif à un moment donné.

icône de bulle
Composant Boutons
Les boutons qui ne sont pas des onglets peuvent fonctionner indépendamment des autres boutons.

Anatomie

1. Icône d'onglet actif
2. Icône d'onglet inactif
3. Étiquette de l'onglet actif
4. Étiquette d'onglet inactive

Spécifications

Onglets imbriqués dans la barre d'application – alignés à gauche

icône de bulle
composant de barre d'application et d'en-tête
Spécifications, directives de style et plus encore.

Onglets imbriqués dans la barre d'application – alignement flexible

Grâce à un alignement flexible, la configuration des onglets s'étire ou se comprime pour s'adapter à l'espace disponible.

Onglets réduits dans la barre d'application – menu latéral

icône de bulle
composant de barre d'application et d'en-tête
Spécifications, directives de style et plus encore.

Barre d'onglets autonome – alignée à gauche

Barre d'onglets autonome – alignement flexible

Grâce à un alignement flexible, la configuration des onglets s'étire ou se comprime pour s'adapter à l'espace disponible.

Dépassement de chaîne de l'étiquette de l'onglet

Mise à l'échelle des mises en page

Ces exemples de mise en page montrent comment adapter les onglets aux écrans de différentes largeurs et hauteurs. Veuillez noter que toutes les valeurs de pixels sont exprimées en pixels rendus, avant tout sous-échantillonnage ou suréchantillonnage.

Écrans standard versus écrans larges dans la catégorie des écrans de faible hauteur

Écrans standard et écrans larges dans une catégorie de hauteur standard

Écrans standard versus écrans larges dans la catégorie des écrans de grande hauteur

Écrans extra-larges et super-larges dans toutes les hauteurs

Styles

Typographie

Style de caractères Police de caractères Poids Taille (dp)
Corps 3 M Roboto Moyen 24
Corps 3 Roboto Régulier 24

Couleur

Élément Couleur (mode jour) Couleur (mode nuit)
Type principal / icônes Blanc Blanc à 88%
Type secondaire / icônes Blanc à 72% Blanc à 60 %
arrière-plan de la barre d'onglets Noir Noir
Arrière-plan de la barre d'onglets au défilement Noir à 84% Noir à 88%
Icône d'onglet - état actif Blanc Blanc à 88%
Icône d'onglet - état inactif Blanc à 56% Blanc à 50%

Tailles

Élément Taille (dp)
Icône principale 44
Icône secondaire 36
Cible tactile de l'icône 76

Exemples

Onglets réduits.


Onglets imbriqués dans la barre d'application.

Barre d'onglets autonome.