1. Introduction
Material Components (MDC) aide les développeurs à implémenter Material Design. Conçu par une équipe d'ingénieurs et de spécialistes de l'expérience utilisateur chez Google, MDC propose des dizaines de composants d'interface utilisateur élégants et fonctionnels. Il est disponible pour Android, iOS, le Web et Flutter.material.io/develop. |
Les composants Material Design pour le Web (MDC Web) sont indépendants du framework et créés à l'aide de JavaScript standard. Cela permet à MDC Web de fonctionner de manière transparente avec votre processus de développement. Ces composants peuvent être installés selon les besoins pour vous aider à apporter des améliorations de conception agiles à votre application existante.
Objectifs de l'atelier
Dans cet atelier de programmation, vous remplacerez certains composants existants d'un formulaire par ceux fournis par MDC Web :
Composants MDC Web utilisés dans cet atelier
- Bouton
- Sélectionner
- Champ de texte
Prérequis
- Une version récente de Node.js (fournie avec npm, un gestionnaire de packages JavaScript)
- L'exemple de code (à télécharger à l'étape suivante)
- Connaissances de base en HTML, CSS et JavaScript
Comment évalueriez-vous votre niveau d'expérience en développement Web ?
2. Configurer l'environnement de développement
Télécharger l'application de départ de l'atelier de programmation
L'application de départ se trouve dans le répertoire material-components-web-codelabs-master/mdc-111/starter. Assurez-vous d'utiliser la commande cd pour accéder à ce répertoire avant de commencer.
… ou cloner l'atelier depuis GitHub
Pour cloner cet atelier de programmation à partir de GitHub, exécutez les commandes suivantes :
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
Installer les dépendances du projet
À partir du répertoire de démarrage (material-components-web-codelabs/mdc-111/starter), exécutez la commande suivante :
npm install
Vous verrez beaucoup d'activité. À la fin, votre terminal devrait afficher une installation réussie :
Exécuter l'application de départ
Dans le répertoire de démarrage, exécutez la commande suivante :
npm start
Le webpack-dev-server démarre. Accédez à http://localhost:8080/ dans votre navigateur pour afficher la page.
Opération réussie ! Le formulaire d'adresse de livraison de l'application doit s'afficher :
3. Modifier le bouton
Installer le bouton MDC
Appuyez sur Ctrl+C pour arrêter le serveur de développement. Ensuite, installez le package npm du bouton MDC et redémarrez le serveur :
npm install @material/button npm start
Importer le code CSS
En haut de _theme.scss, supprimez le bloc .crane-button { ... } et ajoutez le code suivant à la place :
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Modifier le balisage
Dans index.html, supprimez la classe crane-button de l'élément <button>, ajoutez les classes mdc-button et mdc-button--raised, puis imbriquez le libellé dans un élément <span> avec la classe mdc-button__label :
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Ajouter l'ondulation
Les boutons MDC peuvent être utilisés sans JavaScript. Toutefois, l'ajout d'une ondulation interactive au bouton crée une expérience utilisateur plus riche.
Appuyez sur Ctrl+C pour arrêter le serveur de développement. Exécutez ensuite la commande suivante :
npm install @material/ripple npm start
Ajoutez la déclaration d'importation suivante en haut de app.js :
import {MDCRipple} from '@material/ripple';
Pour instancier l'ondulation sur le bouton, ajoutez le code suivant en bas de app.js :
new MDCRipple(document.querySelector('.mdc-button'));
Importer la police Roboto
Par défaut, Material Design utilise Roboto pour les polices de caractères des composants.
Dans index.html, importez la police Web Roboto en ajoutant le code suivant à l'élément <head> :
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Actualisez la page. Vous devriez obtenir ceci :
Le bouton affiche désormais un léger effet d'ondulation comme retour visuel lorsque vous appuyez dessus.
4. Modifier l'élément de sélection
Le composant MDC Select encapsule un élément HTML <select> natif. Utilisez-le partout où vous utiliseriez normalement un <select>. Modifions le champ "État".
Installer le module de nœud MDC
Appuyez sur Ctrl+C pour arrêter le serveur de développement. Exécutez ensuite la commande suivante :
npm install @material/select npm start
Importer le code CSS
Ajoutez le code suivant à _theme.scss, juste après l'importation du bouton :
@import "@material/select/mdc-select";
Modifier le balisage
Recherchez l'élément <select> dans index.html. Remplacez la classe crane-input par mdc-select__native-control :
<select class="mdc-select__native-control" id="crane-state-input" required>
Juste au-dessus de la balise <select>, ajoutez le balisage suivant pour la flèche de la liste déroulante du composant MDC Select :
<i class="mdc-select__dropdown-icon"></i>
Juste en dessous de la balise de fermeture </select>, remplacez la classe crane-label par mdc-floating-label :
<label class="mdc-floating-label" for="crane-state-input">
Ajoutez ensuite le balisage suivant immédiatement après le libellé :
<div class="mdc-line-ripple"></div>
Enfin, ajoutez les balises suivantes autour de l'élément <select> (mais à l'intérieur de l'élément crane-field) :
<div class="mdc-select">
...
</div>
Le balisage obtenu doit se présenter comme suit :
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Importer le code JS
Ajoutez la déclaration d'importation suivante en haut de app.js :
import {MDCSelect} from '@material/select';
Pour instancier la sélection, ajoutez le code suivant en bas de app.js :
new MDCSelect(document.querySelector('.mdc-select'));
Actualisez la page. Elle doit maintenant se présenter comme suit :
Le composant MDC Select présente une liste d'options à l'utilisateur dans un format familier, mais avec un style moderne.
5. Modifier les champs de texte
Les champs de texte Material Design offrent des avantages considérables en termes de facilité d'utilisation par rapport aux éléments <input> simples. Ils sont conçus pour être faciles à identifier dans un contenu complexe et affichent un retour visuel subtil lorsque l'utilisateur interagit avec eux.
Installer le module de nœud MDC
Appuyez sur Ctrl+C pour arrêter le serveur de développement. Exécutez ensuite la commande suivante :
npm install @material/textfield npm start
Ajouter le code CSS
Ajoutez le code suivant à _theme.scss, juste après l'importation de la sélection :
@import "@material/textfield/mdc-text-field";
Modifier le balisage
Dans index.html, recherchez l'élément <input> pour le champ "Nom". Remplacez la classe crane-input par mdc-text-field__input :
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Ensuite, remplacez la classe crane-label par mdc-floating-label :
<label class="mdc-floating-label" for="crane-name-input">
Ajoutez ensuite le balisage suivant immédiatement après le libellé :
<div class="mdc-line-ripple"></div>
Enfin, encapsulez les trois éléments avec le code suivant :
<div class="mdc-text-field">
...
</div>
Le balisage obtenu doit se présenter comme suit :
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Répétez la même procédure pour tous les autres <input> éléments de la page.
Le balisage des champs "Adresse", "Ville" et "Code postal" doit se présenter comme suit :
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Vous pouvez maintenant supprimer les styles .crane-label et .crane-input de _theme.scss, qui ne sont plus utilisés.
Importer le code JS
Ajoutez la déclaration d'importation suivante en haut de app.js :
import {MDCTextField} from '@material/textfield';
Pour instancier les champs de texte, ajoutez le code suivant en bas de app.js :
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Actualisez la page. Elle doit maintenant se présenter comme suit :
Les champs de texte ont tous été mis à jour pour utiliser le thème Material.
6. Récapitulatif
Vous avez remplacé certains composants courants (champs de texte, sélection et bouton) sans avoir à repenser complètement votre application. Bravo !
La barre d'application supérieure et le tiroir de navigation sont d'autres composants qui peuvent faire une grande différence.
Étapes suivantes
Pour découvrir encore plus de composants de MDC Web, consultez le catalogue MDC Web.
Si vous souhaitez utiliser MDC Web avec un framework particulier, consultez MDC-112 : Intégrer des composants Material Design aux frameworks Web.