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. |
Que sont Material Design et Material Components pour le Web ?
Material Design est un système permettant de créer des produits numériques audacieux et esthétiques. Les équipes produit peuvent ainsi réaliser leurs meilleurs graphismes en combinant style, branding, interactions et animations selon des principes communs et des composants harmonieux.
Pour le Web mobile et pour ordinateur, Material Components Web (MDC Web) allie la conception et l'ingénierie à une bibliothèque de composants pour assurer la cohérence entre les applications et les sites Web. Les composants Web de MDC se trouvent chacun dans leurs propres modules de nœud. Par conséquent, à mesure que le système Material Design évolue, ces composants peuvent être facilement mis à jour pour garantir une implémentation homogène au pixel près et le respect des normes de développement front-end de Google. MDC est également disponible pour Android, iOS et Flutter.
Dans cet atelier de programmation, vous allez créer une page de connexion à l'aide de plusieurs composants de MDC Web.
Objectifs de l'atelier
Cet atelier de programmation est le premier d'une série de trois qui vous aideront à créer une application appelée Shrine, un site Web d'e-commerce qui vend des vêtements et des articles pour la maison. Il vous montrera comment personnaliser les composants pour représenter une marque ou un style à l'aide de MDC Web.
Dans cet atelier de programmation, vous créerez une page de connexion pour Shrine contenant :
- Deux champs de texte, un pour le nom d'utilisateur et l'autre pour un mot de passe
- Deux boutons, un pour "Annuler" et une pour "Suivant"
- Nom du site Web (Shrine)
- Image du logo Shrine
Composants Web de MDC dans cet atelier de programmation
- Champ de texte
- Bouton
- Ondulation
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 de HTML, CSS et JavaScript
Nous cherchons constamment à améliorer nos tutoriels. Comment évalueriez-vous votre niveau d'expérience en développement Web ?
<ph type="x-smartling-placeholder">2. Configurer l'environnement de développement
Télécharger l'application de départ de l'atelier de programmation
Elle se trouve dans le répertoire material-components-web-codelabs-master/mdc-101/starter. Assurez-vous d'accéder à ce répertoire avec la commande cd 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-101/starter
Installer les dépendances du projet
À partir du répertoire de démarrage, exécutez la commande suivante:
npm install
Vous verrez de nombreuses activités et, à la fin, votre terminal devrait indiquer une installation réussie:
Si ce n'est pas le cas, exécutez npm audit fix.
Exécuter l'application de départ
Dans le même répertoire, exécutez la commande suivante:
npm start
webpack-dev-server va démarrer. Saisissez l'adresse http://localhost:8080/ dans votre navigateur pour afficher la page.
Opération réussie. Le code de démarrage de la page de connexion de Shrine doit s'exécuter dans votre navigateur. Vous devriez voir le nom "Shrine". et le logo Shrine juste en dessous.
Consulter le code
Métadonnées dans index.html
Dans le répertoire de démarrage, ouvrez index.html avec l'éditeur de code de votre choix. Il doit contenir les éléments suivants :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>
Ici, une balise <link> permet de charger le fichier bundle-login.css généré par webpack, et une balise <script> inclut le fichier bundle-login.js. Nous incluons également le fichier normalize.css pour un rendu cohérent entre les navigateurs, ainsi que la police Roboto de Google Fonts.
Styles personnalisés dans login.scss
Les composants Web MDC sont stylisés à l'aide de classes CSS mdc-*, comme la classe mdc-text-field. (MDC Web traite sa structure DOM comme faisant partie de son API publique.)
En général, nous vous recommandons d'apporter des modifications de style personnalisées aux composants à l'aide de vos propres classes. Vous avez peut-être remarqué certaines classes CSS personnalisées dans le code HTML ci-dessus, telles que shrine-logo. Ces styles sont définis dans login.scss pour ajouter des styles de base à la page.
Ouvrez login.scss. La page de connexion affiche les styles suivants:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
Maintenant que vous connaissez le code de démarrage, vous pouvez implémenter notre premier composant.
3. Ajouter des champs de texte
Pour commencer, nous allons ajouter deux champs de texte à notre page de connexion, dans lesquels les utilisateurs pourront saisir leur nom d'utilisateur et leur mot de passe. Nous allons utiliser le composant de champ de texte MDC, qui inclut une fonctionnalité intégrée permettant d'afficher un libellé flottant et d'activer une ondulation tactile.
Installez le champ de texte MDC.
Les composants Web MDC sont publiés via des packages NPM. Pour installer le package du composant de champ de texte, exécutez la commande suivante:
npm install @material/textfield@^6.0.0
Ajouter le code HTML
Dans index.html, ajoutez le code suivant dans l'élément <form> du corps:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
La structure DOM des champs de texte MDC se compose de plusieurs parties:
- L'élément principal,
mdc-text-field - Sous-éléments
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labeletmdc-line-ripple
Ajouter le CSS
Dans login.scss, ajoutez l'instruction d'importation suivante après l'importation existante:
@import "@material/textfield/mdc-text-field";
Dans le même fichier, ajoutez les styles suivants pour aligner et centrer les champs de texte:
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
Ajouter le code JavaScript
Ouvrez login.js, qui est actuellement vide. Ajoutez le code suivant pour importer et instancier les champs de texte:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
Ajouter la validation HTML5
Les champs de texte indiquent si l'entrée du champ est valide ou contient une erreur à l'aide des attributs fournis par l'API de validation des formulaires HTML5.
Vous saurez :
- Ajoutez l'attribut
requiredaux élémentsmdc-text-field__inputdes champs de texte Username (Nom d'utilisateur) et Password (Mot de passe). - Définissez l'attribut
minlengthde l'élémentmdc-text-field__inputdu champ de texte Password (Mot de passe) sur"8".
Ajustez les deux éléments <label class="mdc-text-field mdc-text-field--filled"> pour qu'ils se présentent comme suit:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
Actualisez la page http://localhost:8080/. Une page s'affiche alors avec deux champs de texte, pour le nom d'utilisateur et le mot de passe.
Cliquez sur les champs de texte pour voir l'animation du libellé flottant et l'animation d'ondulation de ligne (la ligne de bordure inférieure qui ondule):
4. Ajouter des boutons
Nous allons ensuite ajouter deux boutons sur notre page de connexion : "Cancel" (Annuler) et "Next" (Suivant). Nous allons utiliser le composant MDC Button ainsi que le composant MDC Ripple pour compléter l'effet d'ondulation d'encre emblématique de Material Design.
Installer le bouton MDC
Pour installer le package du composant Bouton, exécutez la commande suivante:
npm install @material/button@^6.0.0
Ajouter le code HTML
Dans index.html, ajoutez le code suivant sous la balise de fermeture de l'élément <label class="mdc-text-field mdc-text-field--filled password">:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>
Pour l'option "Cancel" (Annuler) nous utilisons le style de bouton par défaut. Toutefois, l'étape "Suivant" utilise une variante de style en relief, comme l'indique la classe mdc-button--raised.
Pour les aligner facilement par la suite, nous encapsulons les deux éléments mdc-button dans un élément <div>.
Ajouter le CSS
Dans login.scss, ajoutez l'instruction d'importation suivante après les importations existantes:
@import "@material/button/mdc-button";
Pour aligner les boutons et ajouter une marge autour d'eux, ajoutez les styles suivants à login.scss:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
Ajouter une ondulation d'encre aux boutons
Lorsque l'utilisateur touche ou clique sur un bouton, il doit afficher des commentaires sous la forme d'une ondulation d'encre. Le composant d'ondulation d'encre nécessite JavaScript, que nous allons donc ajouter à la page.
Pour installer le package du composant d'ondulation, exécutez la commande suivante:
npm install @material/ripple@^6.0.0
En haut de login.js, ajoutez l'instruction d'importation suivante:
import {MDCRipple} from '@material/ripple';
Pour instancier les ondulations, ajoutez le code suivant à login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
Comme nous n'avons pas besoin de conserver une référence à l'instance d'ondulation, il n'est pas nécessaire de l'attribuer à une variable.
Et voilà ! Actualisez la page. Une ondulation d'encre s'affiche lorsque vous cliquez sur chaque bouton.
Renseignez les champs de texte avec des valeurs valides, puis cliquez sur "SUIVANT". . Bravo ! Vous allez continuer à travailler sur cette page dans MDC-102.
5. Récapitulatif
Grâce au balisage HTML simplifié et à seulement quelques lignes de CSS et JavaScript, les composants Material pour la bibliothèque Web vous ont permis de créer une page de connexion esthétique conforme aux consignes Material Design, et présentant une apparence et un comportement cohérents sur tous les appareils.
Étapes suivantes
Le champ de texte, le bouton et l'ondulation sont trois composants principaux de la bibliothèque Web MDC, mais il en existe beaucoup d'autres. Vous pouvez également découvrir les autres composants de MDC Web.
Vous pouvez accéder à MDC-102: Structure et mise en page Material Design pour en savoir plus sur le panneau de navigation et la liste d'images. Merci d'avoir essayé Material Components. Nous espérons que cet atelier de programmation vous a plu.