Apprendre à utiliser Material Design Lite : Les boutons

Les boutons font partie intégrante des sites Web fonctionnels (Les designers aiment ça !). Les actions des utilisateurs sur le Web, en général, commencent et finissent en cliquant sur un bouton. Sur Google Mail par exemple, nous créons un nouvel email en cliquant sur le bouton Nouveau. Nous allons probablement également cliquer sur quelques boutons supplémentaires durant la personnalisation du mail. Et enfin, nous cliquons sur le bouton Envoyer pour envoyer le mail. Dans cette partie de la série d'apprentissage de Material Design Lite (MDL), nous allons examiner le composant Bouton.

Le composant du Bouton dans MDL est esentiellement une amélioration visuelle de la balise <button>, ou l'élement <a> pour correspondre à l'estétique du Matériel de conception. Conformément à la spécifications, il existe 4 types de bouton

• flat (plat)
• raised (soulevé)
• float (flottant)
• icon (icône)

Nous allons examiner comment mettre en œuvre chacun d'eux et quel est le bouton qui fonctionne le mieux selon la situation.

Pour rappel, assurez-vous d'avoir les feuilles de style MDL et le code JavaScript de définis à l'intérieur du head de votre fichier. Vous pouvez personnaliser les couleurs du thème qui seront appliquées aux composants en utilisant le composeur de thèmes MDL.

1

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

2

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>

3

<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />

4

<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Une fois que tout est réglé, nous pouvons ajouter les composants Boutons — en commençant pas le flat.

Le Bouton Flat

La création d'un bouton MDL est plutôt simple. Nous pouvons créer un bouton, soit avec un élément button, un élément input de type submit ou un lien.

1

<button>Submit</button>

2

<!-- or -->

3

<input type="text" type="submit" title="Submit">

4

<!-- or -->

5

<a href="#">Submit</a>

Ajoutez la classe mdl-button à cet élément pour y appliquer les styles de boutons de MDL.

1

<button class="mdl-button">Submit</button>

Dans l'exemple plus bas, nous avons créé un bouton flat avec la couleur par défaut.

La couleur du texte dans le bouton est personnalisable en ajoutant une des classes suivantes.

• mdl-button-colored Ajoutez cette classe pour appliquer la modification de la couleur principale du text du bouton.
• mdl-button--accent Alternativement, ajoutez cette classe pour appliquer une couleur d'accentuation.

Référez-vous au nom de la feuille de style principale (material.teal-red.min.css) Votre couleur primaire est "sarcelle" (teal), tandis que le "rouge" (red) sera appliqué pour les colorations accentués ou secondaires (Saisissez du texte dans le champ email plus bas pour observer le résultat)

Le bouton flat est le plus foncamental des types de bouton dans MDL. Il fonctionne le mieux lors d'une situations ou une action intuitive doit être effectuée, comme dans un boite de dialogue popup, dans un élément de type Card (carte), ou dans un formulaire de connexion ou d'inscription.

En raison de son apparence, cependant, il est déconseillé de l'utiliser dans le corps d'un texte. Le bouton flat apparaît comme un texte ordinaire, comme vous pouvez le voir dans l'exemple ci-dessus. Et comme il ne présente pas explicitement l'apparence des boutons commun à première vue, le bouton flat ne saurait pas retransmettre la potentialité qu'il soit un bouton cliquable pour la plupart des utilisateurs.

Lorsque le bouton flat ne semble pas approprié, envisagez d'utiliser un bouton de type raised.

Le Bouton Relevé (Raised)

Le bouton raised reprend les caractéristiques typiques d'un bouton ; il ets carré avec une ombre portée pour donner un effet de relief. Pour en créer un, nous commençons avec un élément button auquel on ajoute la classe mdl-button.

1

<button class="mdl-button">Submit</button>

Puis on lui ajoute la classe mdl-button--raised. Comme auparavant, le bouton raised peut également être personnalisé avec l'ajout des classes mdl-button--colored ou mdl-button--accent.

1

<button class="mdl-button mdl-button--raised">Submit</button>

2

<button class="mdl-button mdl-button--raised mdl-button--colored">Submit</button>

3

<button class="mdl-button mdl-button--raised mdl-button--accent">Submit</button>

Ici nous avons des boutons raised avec la valeur par défaut, la couleur primaire et la couleur secondaire.

Le bouton raised est important, ce qui le rend approprié lorsque l'attention des utilisateurs est une priorité absolue. Il pourrait être utilisé, par exemple, sur un bouton qui appel à l'action pour la section "hero", un bouton submit dans un formulaire d'abonnement, un bouton "Acheter maintenant" sur la page d'un produit.

Note : garder à l'esprit la hiérarchie lors de l'application d'un bouton raised. L'utilisation du'n bouton raised dans un bloc de contenu avec une ombre portée, comme une boîte de dialogue popup, peut rendre le contenu trop lourd pour une attention optimale.

Bouton d'Action Flottant (BAF)

Le Bouton d'Action Flottant (BAF) a été reconnu comme étant la signature du Design Matériel. Le BAF est un bouton circulaire avec un icône flottant sur la page.  Le but d'un BAF est semblable à un bouton d'appel à l'action ; il souligne une action que les utilisateurs seraient — probablement — amenés à effectuer le plus. Il est généralement présenté avec une couleur vive qui le rend plus important parmi le reste des éléments de l'interface utilisateur de la page.

Une fois de plus, nous commençons un Bouton d'Action Flottant avec un élément button vide agrémenté de la classe mdl-button. Cette fois, au lieu du texte, nous incluons une icône dans le bouton. Référez-vous au guide des icônes du Design Matériel pour trouver le nom de l'icône à ajouter.

1

<button class="mdl-button"><i class="material-icons">mode_edit</i></button>

Pour transformer le bouton en BAF, nous ajoutons la classe mdl-button--fab, en outre avec la classe mdl-button--colored pour modifier la couleur de fond.

1

<button class="mdl-button mdl-button--fab mdl-button--colored">Submit</button>

Comme vous pouvez le voir ci-dessous, le bouton BAF prend la couleur secondaire lorsque que nous lui précison une couleur, en opposition  à la couleur primaire, comme nous l'avions vu avec les boutons flat et raised.

MDL applique la couleur primaire à travers la plupart des composants "en couleur", comme le menu de navigation, les onglets, les champs de texte, les curseurs et les cases à cocher, ce qui la rend tout à fait dominante. Le BAF devrait être plus important parmi le reste de l'interface utilisateur, donc il prend la couleur d'accent (secondaire) par défaut.

En tout cas, si la couleur primaire se révèle être plus apte, vous pouvez ajouterla classe mdl-button--primary à la place.

1

<button class="mdl-button mdl-button--fab mdl-button--primary">Submit</button>

Ici, il est avec la couleur primaire :

Bouton d'icône

Contrairement au BAF, l'îcone ne prend pas la forme d'un cercle ; il apparaît simplement comme une icône. Le bouton d'icône est très pratique dans les endrois où l'espace est limité, ou pour représenter un bouton que l'utilisateur a pour coutûme d'utiliser dans des applications. Prenez la barre d'outil de Google Docs pour l'exemple :

Utiliser un bouton textuel dans la barre d'outil à cet endrois est inimaginable.

Le bouton d'icône est créé grâce à la combinaison des classes mdl-button et mdl-button--icon.

1

<button class="mdl-button mdl-button--icon">

2

  <i class="material-icons">backup</i>

3

</button>

Cet exemple nous montre une icône qui représente l'action de téléchargement ou de sauvegarde.

Le Bouton Ripple Effect (effet d'ondulation au clic)

En outre, ces boutons peuvent être améliorés avec l'effet ripple. L'effet ripple est une autre des signatures visuelles de la conception matérielle et fournit une rétroaction visuelle lorsque le bouton a été cliqué. L'effet débute à l'endrois ou le clic est effectué, reproduisant un effet réaliste.

Cette amélioration passe par 2 classes : mdl-js-button et mdl-js-ripple-effect qui peuvent être appliqués sur tous les types de bouton MDL.

Ajoutez ces 2 classes sur le bouton :

1

<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Save</button>

et l'effet ripple peut maintenant être appliqué :

Bouton inactif

Dans certains cas, comme lorsque un champ de texte nécessaire est encore vide, ou lorsque une option particulière doit encore être sélectionné, le bouton d'action pourrait être désactivé. Pour désactiver un bouton MDL, ajoutez la propriété booléenne disabled sur le bouton :

1

<button class="mdl-button" disabled>Send</button>

Le bouton devrait maintenant être insensible à l'interaction de l'utilisateur (l'effet ripple sera également désactivé). Ajouter une classes modifiant la couleur mdl-button--colored ou mdl-button--accent, n'aura aucun effet sur un bouton désactivé.

L'attribu disabled est aussi applicable sur des liens. (Non compatible W3C)

Conclusion

Les bouton sont vraiment faciles à implementer. Nous pouvons construire un bouton joliment stylisé, avec une légère animation ripple, avec seulement un couple de classes. Personellement, j'espère que cette fonctionnalité sera encore amélioré en s'inspirant du système de bouton de Bootstrap, notamment en y ajoutant les groupes de boutons.

Dans le prochain épisode de cette série, nous allons nous pencher sur le composant du champ texte, que nous avons déjà rencontré à quelques reprises jusqu'ici.

À la prochaine !