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 pour ordinateur et le Web mobile, le Web Material Components (MDC Web) regroupe le design et l'ingénierie avec une bibliothèque de composants permettant d'assurer la cohérence entre les applications et les sites Web. Les composants Web MDC sont hébergés dans leurs propres modules de nœuds. Ainsi, à mesure que le système Material Design évolue, ces composants peuvent être facilement mis à jour pour garantir une mise en œuvre homogène au pixel près et leur adhésion aux 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
Il s'agit du premier des trois ateliers de programmation qui vous aideront à créer une application appelée Shrine, un site d'e-commerce pour la vente de vêtements et d'articles pour la maison. Il vous montrera comment personnaliser les composants pour représenter n'importe quelle marque ou 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 pour les boutons "Cancel" (Annuler) et un pour le bouton "Next" (Suivant).
- Le nom du site Web (Shrine)
- Image du logo Shrine
Composants Web MDC utilisés dans cet atelier
- 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 en HTML, CSS et JavaScript
Nous nous efforçons constamment d'améliorer nos tutoriels. Comment évalueriez-vous votre niveau d'expérience en développement Web ?
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. Pensez à cd dans 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-101/starter
Installer les dépendances du projet
Dans le répertoire initial, exécutez la commande suivante:
npm install
Vous verrez de nombreuses activités et, une fois l'installation terminée, votre terminal devrait indiquer que l'installation a réussi:
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
Le webpack-dev-server commencera. Saisissez http://localhost:8080/ dans le navigateur pour afficher la page.
Opération réussie. Le code de départ de la page de connexion de Shrine doit s'exécuter dans votre navigateur. Vous devez voir le nom "Shrine" et le logo Shrine juste en dessous.
Examiner le code
Métadonnées dans index.html
Dans le répertoire de démarrage, ouvrez index.html avec votre éditeur de code préféré. 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> est utilisée pour 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 composant normalize.css pour assurer un rendu cohérent dans l'ensemble des navigateurs, ainsi que la police Roboto depuis Google Fonts.
Styles personnalisés dans login.scss
Le style des composants Web MDC est défini à l'aide de classes CSS mdc-*, comme la classe mdc-text-field. (MDC Web traite sa structure DOM dans le cadre de son API publique.)
En règle générale, il est recommandé 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, par exemple shrine-logo. Ces styles sont définis dans login.scss pour ajouter des styles de base à la page.
Ouvrez login.scss et vous verrez les styles suivants pour la page de connexion:
@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 allez implémenter notre premier composant.
Pour commencer, nous allons ajouter à notre page de connexion deux champs de texte où les utilisateurs peuvent saisir leur nom d'utilisateur et leur mot de passe. Nous allons utiliser le composant "Champ de texte" de MDC, qui comprend une fonctionnalité intégrée qui affiche un libellé flottant et active une animation Ripple en cas d'appui.
Installez le champ de texte du MDC
Les composants Web MDC sont publiés via des packages npm. Pour installer le package pour le composant de champ de texte, exécutez la commande suivante:
npm install @material/textfield
Ajouter le code HTML
Dans index.html, ajoutez le code suivant dans l'élément <form> du corps:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>La structure DOM MDC de texte se compose de plusieurs parties:
- Élément principal :
mdc-text-field - Sous-éléments
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: block;
width: 300px;
margin: 20px auto;
}Ajouter le code JavaScript
Ouvrez login.js, qui est actuellement vide. Ajoutez le code suivant pour importer et instancier des 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 les données saisies sont valides ou contiennent une erreur, en utilisant les attributs fournis par l'API HTML5 de validation des formulaires.
Vous saurez :
- Ajoutez l'attribut
requiredaux élémentsmdc-text-field__inputdes champs de texte Username 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 <div class="mdc-text-field"> comme suit:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>Actualisez la page à l'adresse 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 visionner l'animation du libellé flottant et celle de l'animation ondulée (la bordure inférieure qui ondule vers l'extérieur):
Nous allons ensuite ajouter deux boutons sur notre page de connexion : "Cancel" (Annuler) et "Next" (Suivant). Nous allons utiliser le composant MDC Button et le composant MDC Ripple pour compléter l'effet d'encre Material Design emblématique.
Installer le bouton MDC
Pour installer le package pour le composant du bouton, exécutez la commande suivante:
npm install @material/button
Ajouter le code HTML
Dans index.html, ajoutez le code suivant sous la balise de fermeture de l'élément <div class="mdc-text-field 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 le bouton "Annuler", nous utilisons le style de bouton par défaut. Cependant, le bouton "Suivant" utilise une variante style élevée, indiquée par la classe mdc-button--raised.
Pour les aligner facilement ultérieurement, encapsulez 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 des boutons, ajoutez les styles suivants à login.scss :
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}Ajouter un effet d'encre aux boutons
Lorsque l'utilisateur appuie ou clique sur un bouton, un commentaire en forme d'encre doit s'afficher. Le composant "tâche d'encre" nécessite JavaScript. Nous allons donc l'ajouter à la page.
Pour installer le package pour le composant Ripple, exécutez la commande suivante:
npm install @material/ripple
En haut du fichier login.js, ajoutez l'instruction d'importation suivante:
import {MDCRipple} from '@material/ripple';Pour instancier les ondulations, ajoutez ce qui suit à login.js :
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Étant donné que 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 tâche d'encre s'affiche lorsque vous cliquez sur chaque bouton.
Remplissez les champs de texte avec des valeurs valides, puis appuyez sur le bouton & quott. Bravo ! Vous continuerez à travailler sur cette page dans MDC-102.
Grâce au balisage HTML de base et à quelques lignes de code CSS et JavaScript, Material Components pour la bibliothèque Web vous a aidé à créer une page de connexion conforme aux consignes de Material Design, avec un style et un comportement cohérents sur tous les appareils.
Étapes suivantes
Le champ de texte, le bouton et l'ondulation sont trois composants essentiels de la bibliothèque Web MDC, mais il y en a bien plus ! Vous pouvez également consulter 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.