Collection de guides rapides
Afficher des composants interactifs
Choisissez le composant adapté à votre UI et découvrez comment l'implémenter dans votre application.
Créer un composant de structure pour maintenir l'UI
Structure fondamentale qui fournit une plate-forme standardisée pour les interfaces utilisateur complexes. Les échafaudages rassemblent différentes parties de l'interface utilisateur, telles que les barres d'application et les boutons d'action flottants, ce qui donne aux applications une apparence cohérente.
Afficher une barre d'application
Les conteneurs permettent à l'utilisateur d'accéder aux principales fonctionnalités et aux éléments de navigation. Il existe deux types de barres d'application : les barres d'application supérieures et les barres d'application inférieures.
Créer un bouton
Ces composants fondamentaux permettent aux utilisateurs de déclencher une action définie. Il existe cinq types de boutons. Découvrez l'apparence de chacun des cinq types de boutons, ainsi que les cas d'utilisation et la manière de les implémenter.
Créer un bouton d'action flottant (FAB)
Bouton à forte intensité qui permet aux utilisateurs d'effectuer une action principale dans une application. Ce composant de bouton promeut une action unique et ciblée qui correspond au chemin le plus courant qu'un utilisateur peut emprunter. Il se trouve généralement en bas à droite de l'écran.
Créer une fiche en tant que conteneur
Il sert de conteneur Material Design à votre interface utilisateur. Les cartes présentent un seul élément de contenu cohérent. Ce qui différencie la fiche des autres conteneurs est le fait qu'elle ne présente qu'un seul élément de contenu.
Créer un chip pour représenter des entités complexes
Élément d'interface utilisateur compact et interactif qui représente des entités complexes telles qu'un contact ou une balise, souvent avec une icône et un libellé. Les chips peuvent être cliquables, masquables ou à cocher.
Afficher des messages pop-up ou des requêtes d'entrée utilisateur
Affiche des messages pop-up ou demande une entrée utilisateur sur une couche au-dessus du contenu principal de l'application. Ce composant crée une expérience d'interface utilisateur intrusive pour capter l'attention des utilisateurs.
Créer un indicateur de progression
Affiche visuellement l'état d'une opération. Ces indicateurs peuvent indiquer que le traitement est en cours, sans indiquer qu'il est presque terminé. Ils utilisent le mouvement pour attirer l'attention de l'utilisateur sur le degré d'avancement du processus, comme le chargement ou le traitement des données.
Créer un curseur pour une plage de valeurs
Permet aux utilisateurs de faire des sélections parmi une plage de valeurs sur un continuum, par exemple pour définir le volume audio ou filtrer les données du graphique sur une plage de prix.
Ajouter un bouton d'activation/de désactivation
Permet aux utilisateurs de basculer entre deux états. Les utilisateurs peuvent faire glisser le curseur d'un bouton ou cliquer dessus pour modifier son état actuel.
Créer une bottom sheet
Affiche le contenu secondaire ancré en bas de l'écran. Vous pouvez utiliser des bottom sheets standards ou modales pour présenter aux utilisateurs du contenu secondaire.
Créer un menu coulissant avec le composant panneau de navigation
Menu coulissant permettant aux utilisateurs d'accéder à différentes sections de votre application. Ils peuvent l'activer en balayant l'écran depuis le côté ou en appuyant sur une icône de menu.
Créer une notification avec une barre de notification
Affiche une notification brève en bas de l'écran. Cela peut fournir des commentaires sur une opération ou une action sans interrompre l'expérience utilisateur. Les barres de notification disparaissent au bout de quelques secondes. L'utilisateur peut également les ignorer manuellement.
Afficher une liste ou une grille
Affichez et organisez efficacement des ensembles d'éléments à l'aide de listes et de grilles.
Vous avez des questions ou des commentaires ?
Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.