Cette page a été traduite par l'API Cloud Translation.

MDC-101 Web: Principes de base de Material Components (MDC) (Web)

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 travaillant pour 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 sur ordinateur et mobile, Material Components Web (MDC Web) met une bibliothèque de composants au service du graphisme et de l'ingénierie afin d'assurer une expérience utilisateur homogène, quelles que soient les applications et les sites Web. Les composants MDC Web sont chacun associés à leur propre module de nœud. Ainsi, lorsque 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 respecter les 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 un site Web d'e-commerce appelé Shrine, dédié à 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 boutons, l'un pour "Cancel" (Annuler) et l'autre pour "Next" (Suivant)
Le nom du site Web (Shrine)
Image du logo Shrine

Composants Web 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 en HTML, CSS et JavaScript

Nous cherchons constamment à améliorer nos tutoriels. Comment évalueriez-vous votre niveau d'expérience en développement Web ?

Débutant

Intermédiaire

Expert

Télécharger l'application de départ de l'atelier de programmation

Télécharger l'application de départ

Elle se trouve dans le répertoire material-components-web-codelabs-master/mdc-101/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-101/starter

Installer les dépendances du projet

Dans le répertoire de démarrage, exécutez la commande suivante :

npm install

Vous verrez beaucoup d'activité. À la fin, votre terminal devrait afficher une installation réussie :

Si ce n'est pas le cas, exécutez npm audit fix.

MDC Web utilise un préprocesseur CSS appelé Sass. Si vous utilisez un autre préprocesseur CSS (ou aucun), ce n'est pas un problème. Vous pouvez utiliser Sass en plus de votre préprocesseur actuel en installant la CLI sass ou en utilisant un plug-in (par exemple, sass-loader pour Webpack, gulp-sass pour Gulp ou grunt-sass pour Grunt) dans votre chaîne d'outils de compilation.

Pour que notre code fonctionne dans les anciens navigateurs comme IE 11, nous utilisons un transcompilateur appelé Babel pour transcompiler la syntaxe JavaScript ES2015 de MDC Web en syntaxe JavaScript ES5.

Nous allons utiliser webpack pour regrouper nos fichiers et diffuser notre site en local. La configuration Webpack de ce projet a déjà été configurée pour vous dans le fichier webpack.config.js. Pour en savoir plus sur sa configuration, consultez le guide de démarrage.

Exécuter l'application de départ

Dans le même répertoire, exécutez la commande suivante :

npm start

La webpack-dev-server va commencer. Accédez à l'adresse http://localhost:8080/ dans votre 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. Le nom "Shrine" et le logo Shrine devraient s'afficher.

Examiner 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> 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. De plus, nous incluons 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 MDC Web sont stylisés à l'aide de classes CSS mdc-*, telles que la classe mdc-text-field. (MDC Web considère sa structure DOM comme faisant partie de son API publique.)

En général, nous vous recommandons de modifier le style des composants à l'aide de vos propres classes. Vous avez peut-être remarqué des 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. 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 pouvez implémenter le premier composant.

Pour commencer, nous allons ajouter à notre page de connexion deux champs de texte où les utilisateurs pourront saisir leur nom d'utilisateur et leur mot de passe. Nous utiliserons le composant MDC Text Field, qui inclut une fonctionnalité intégrée qui affiche un libellé flottant et active une animation Ripple en cas d'appui.

Installerlechamp de texte MDC

Les composants MDC Web 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

Ajouter le code HTML

Dans index.html, ajoutez ce qui suit à l'intérieur de l'élément <form> dans le 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 du champ de texte MDC se compose de plusieurs parties :

L'élément principal, mdc-text-field
Sous-éléments mdc-text-field__input, mdc-floating-label et mdc-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 les champs de texte :

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

Ajouter une validation HTML5

Les champs de texte indiquent si la saisie est valide ou contient une erreur, à l'aide des attributs fournis par l'API de validation de formulaire HTML5.

Vous saurez :

Ajoutez l'attribut required aux éléments mdc-text-field__input des champs de texte Nom d'utilisateur et Mot de passe.
Définissez l'attribut minlength de l'élément mdc-text-field__input du champ de texte Mot de passe sur "8".

Ajustez les deux éléments <div class="mdc-text-field"> pour qu'ils ressemblent à ceci :

<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 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 découvrir l'animation du libellé flottant et l'animation de l'ondulation de ligne (la ligne de bordure inférieure qui s'étend 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, ainsi que le composant MDC Ripple, pour obtenir l'effet d'ondulation d'encre emblématique de Material Design.

Installer MDC Button

Pour installer le package du composant de bouton, exécutez la commande suivante :

npm install @material/button

Ajouter le code HTML

Dans index.html, ajoutez ce qui suit 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. Toutefois, le bouton "Suivant" utilise une variante de style surélevée, indiquée par la classe mdc-button--raised.

Pour les aligner facilement plus tard, 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 animation d'encre aux boutons

Lorsque l'utilisateur appuie sur un bouton ou clique dessus, un effet d'encre ondulée doit s'afficher. Le composant d'ondulation d'encre nécessite JavaScript. Nous allons donc l'ajouter à la page.

Pour installer le package du composant Ripple, exécutez la commande suivante :

npm install @material/ripple

En haut de 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'));

Comme nous n'avons pas besoin de conserver une référence à l'instance Ripple, 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 appuyez sur le bouton "SUIVANT". Bravo ! Vous continuerez à travailler sur cette page dans MDC-102.

En utilisant un balisage HTML de base et quelques lignes de code CSS et JavaScript, la bibliothèque Material Components for the Web vous a aidé à créer une magnifique page de connexion conforme aux consignes Material Design, et avec une apparence et un comportement cohérents sur tous les appareils.

Étapes suivantes

Les champs de texte, les boutons et les effets Ripple sont trois composants essentiels de la bibliothèque MDC Web, mais il en existe bien d'autres. Vous pouvez également explorer 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é les composants Material. Nous espérons que cet atelier de programmation vous a plu.

La réalisation de cet atelier de programmation m'a demandé un temps et des efforts raisonnables

Tout à fait d'accord

D'accord

Ni d'accord, ni pas d'accord

Pas d'accord

Pas du tout d'accord

Je souhaite continuer à utiliser Material Components

Tout à fait d'accord

D'accord

Ni d'accord, ni pas d'accord

Pas d'accord

Pas du tout d'accord

MDC-101 Web: Principes de base de Material Components (MDC) (Web) Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Que sont Material Design et Material Components pour le Web ?

Objectifs de l'atelier

Composants Web MDC dans cet atelier de programmation

Prérequis

Nous cherchons constamment à 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

… ou cloner l'atelier depuis GitHub

Installer les dépendances du projet

Exécuter l'application de départ

Examiner le code

Métadonnées dans index.html

Styles personnalisés dans login.scss

Installerlechamp de texte MDC

Ajouter le code HTML

Ajouter le CSS

Ajouter le code JavaScript

Ajouter une validation HTML5

Installer MDC Button

Ajouter le code HTML

Ajouter le CSS

Ajouter une animation d'encre aux boutons

Étapes suivantes

La réalisation de cet atelier de programmation m'a demandé un temps et des efforts raisonnables

Je souhaite continuer à utiliser Material Components

MDC-101 Web: Principes de base de Material Components (MDC) (Web)

Métadonnées dans `index.html`

Styles personnalisés dans `login.scss`