Share
Les boutons font partie intégrante de tout site Web fonctionnel (et les concepteurs les adorent!). Les actions des utilisateurs sur le Web, généralement, commencent et finissent par un clic sur un bouton. Dans Google Mail, par exemple, nous créons un nouvel email en cliquant sur le bouton Composer bouton. Nous allons probablement également cliquer sur quelques boutons supplémentaires pour personnaliser l'e-mail. Et enfin, on clique sur le Envoyer bouton pour envoyer l'e-mail. Dans cette partie de notre série Learning Material Design Lite (MDL), nous examinerons lesBoutons composant.
Le composant Boutons de MDL est essentiellement une amélioration visuelle de la , ou un élément pour se conformer à l'esthétique Material Design. Conformément à la spécification, il existe quatre types de boutons
Nous verrons comment implémenter chacun de ceux-ci et quand le bouton fonctionnera le mieux..
Pour rappel, assurez-vous que les feuilles de style MDL et le code JavaScript sont définis dans le document. tête. Vous pouvez personnaliser le jeu de couleurs qui sera appliqué aux composants à l'aide du générateur Thème MDL..
Une fois qu'ils sont tous définis, nous pouvons déployer leComposant composant-commençant par le appartement type.
Créer un bouton MDL est assez simple. Nous pouvons créer un bouton soit avec un bouton élément, un contribution élément avec soumettre tapez ou une balise d'ancrage.
Soumettre
Ajouter le bouton mdl classe à ces éléments pour appliquer les styles de bouton MDL.
Dans la démo ci-dessous, nous avons créé un appartement bouton avec la couleur par défaut définie sur noir.
La couleur du texte du bouton est personnalisable en incluant l’un des modificateurs suivantsDes classes.
Accentsconagua
bouton mdl - coloré Ajouter cette classe pour appliquer la couleur primaire au texte du bouton.bouton mdl - accent Vous pouvez également ajouter cette classe pour appliquer la couleur d'accentuation..En ce qui concerne le nom principal de la feuille de style (material.teal-red.min.css), notre couleur principale est "sarcelle", tandis que "rouge" est appliqué comme accent ou couleur secondaire (saisissez le texte dans l'entrée de courrier électronique ci-dessous pour afficher ces couleurs prennent effet).
le appartement button est le type de bouton le plus fondamental dans MDL. Cela fonctionnera mieux dans une situation où une action est attendue de manière intuitive, telle que dans une boîte de dialogue contextuelle, dans un composant Carte ou dans un formulaire de connexion ou d'inscription..
Cependant, en raison de son apparence, utilisant un appartement Le bouton dans le corps du texte n'est pas recommandé. le appartement Le bouton apparaît comme un texte normal, comme vous pouvez le voir ci-dessus. Et comme il ne présente pas de manière explicite les caractéristiques communes des boutons au premier abord, le bouton plat ne transmettrait pas l’abondance que la plupart des utilisateurs reconnaîtront comme étant un bouton cliquable..
Est-ce un bouton?Quand le appartement bouton ne vous semble pas approprié, envisagez d'utiliser un soulevé type de bouton.
le soulevé button représente les caractéristiques typiques d'un bouton; il est carré avec une ombre portée pour donner l'effet en relief. Pour en créer un, on commence par un bouton élément avec le bouton mdl classe attachée.
Puis ajoutez le mdl-button - en relief classe à l'élément. Ass avant, le soulevé bouton peut également être personnalisé avec l'ajout de la bouton mdl - coloré ou bouton mdl - accent classe.
Ici nous avons soulevé boutons avec la couleur par défaut, principale et accentuée définie comme arrière-plan du bouton.
le soulevé bouton est important, ce qui le rend approprié lorsque l'attention des utilisateurs est la priorité absolue. Cela peut être appliqué, par exemple, à un bouton d'appel à l'action dans la section héros, un bouton d'envoi dans un formulaire d'abonnement ou un bouton "Acheter maintenant" dans une page de produit..
Remarque: gardez à l'esprit la hiérarchie lors de l'application d'un soulevé bouton. L'utilisation d'un bouton en relief dans un calque de contenu avec des ombres portées, telle qu'une boîte de dialogue contextuelle, peut surcharger le contenu avec des éléments qui se disputent l'attention..
Le bouton d'action flottante (FAB) a été reconnu comme l'élément de signature de Material Design. Le FAB est un bouton circulaire avec une icône flottant sur une page. La fonction d'un FAB s'apparente au bouton d'appel à l'action; il met l'accent sur une action que les utilisateurs effectueraient vraisemblablement le plus. Il est généralement présent avec une couleur vive qui le rend plus important parmi les autres éléments de l'interface utilisateur sur cette page..
Repérer le FABUne fois encore, nous commençons un bouton d’action flottant avec un bouton élément avec le bouton mdl classe. Cette fois, au lieu de texte, nous incluons une icône d’inclusion dans le bouton. Reportez-vous au guide des icônes de conception des matériaux pour choisir le nom de l'icône à afficher..
Pour transformer le bouton en FAB, nous ajoutons le bouton mdl - fab classe, en plus avec le bouton mdl - coloré modifier la couleur de fond.
Comme vous pouvez le voir ci-dessous, le bouton FAB prend la accent la couleur quand réglé sur un bouton coloré, par opposition à la primaire comme nous l’avons vu avec le appartement et soulevé boutons.
MDL applique la couleur primaire à la plupart des composants «colorés», tels que la navigation, les onglets, les champs de texte, les curseurs et les cases à cocher, ce qui la rend totalement dominante. Le FAB devrait être plus important que le reste de l'interface utilisateur, donc il prend la couleur d'accent par défaut.
Dans tous les cas, lorsque la couleur primaire s’avère plus appropriée, vous pouvez ajouter le mdl-button - primaire classe à la place.
La voici avec la couleur primaire:
Contrairement à FAB, le icône ne prend pas la forme d'un cercle; il apparaît simplement comme une icône. Un bouton icône est pratique lorsque l'espace est limité ou qu'il suffit de représenter l'objectif du bouton car les utilisateurs sont habitués à l'application. Prenons comme exemple la barre d’outils Google Docs:
L'utilisation d'un bouton textuel pour une barre d'outils dans ce cas serait inimaginable.
le icône bouton est formé à travers le bouton mdl et bouton mdl - icône combinaison de classe:
Cet exemple affiche une icône décrivant la fonctionnalité de téléchargement ou de sauvegarde:
En outre, ces boutons peuvent être améliorés avec l’effet d’ondulation. L'effet d'entraînement est une autre des signatures visuelles de Material Design et fournit un retour visuel lorsque le bouton a été cliqué. L'effet commence à la coordonnée lorsque vous cliquez, reproduisant ainsi le fonctionnement de l'effet dans la vie réelle..
Cette amélioration passe par deux classes: mdl-js-button et mdl-js-ripple effect qui peut être appliqué à n'importe quel type de bouton MDL.
Ajoutez ces deux classes au bouton:
et l'effet d'entraînement devrait maintenant être appliqué:
Dans certains cas, par exemple lorsqu'un champ de texte obligatoire est encore vide ou qu'une option particulière doit encore être sélectionnée, le bouton pouvant donner lieu à une action peut être désactivé. Pour désactiver les boutons MDL, ajoutez l'attribut HTML boolean désactivée à l'élément button:
Le bouton ne devrait plus réagir à l’interaction de l’utilisateur (l’effet d’ondulation sera également désactivé). Ajout des classes de modificateur de couleur bouton mdl - coloré ou bouton mdl - accent, n'aura également aucun effet sur les boutons désactivés.
le désactivée Cet attribut, bien que non valide en HTML, est également applicable aux boutons créés avec une balise d'ancrage..
Les boutons sont assez simples à mettre en œuvre. Nous pouvons créer un bouton joliment stylé, avec une animation d’effet d’entraînement lisse, avec seulement deux classes. Personnellement, j'espère que le composant sera encore amélioré en s'inspirant du composant Bootstrap Button, en incluant peut-être la variante Button Groups.
Dans le prochain épisode de cette série, nous allons examiner le composant Champs de texte, que nous avons déjà rencontré à quelques reprises jusqu'à présent..
Jusqu'à la prochaine fois!
