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 |
Dans l'atelier de programmation MDC-101, vous avez utilisé deux éléments Material Components (MDC) pour créer une interface utilisateur de page de connexion: le champ de texte et le bouton. À présent, ajoutons des éléments de navigation, de structure et de données.
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez créer une page d'accueil pour Shrine, une application d'e-commerce pour la vente de vêtements et d'articles pour la maison. Cet écran contiendra :
- Un panneau de navigation
- Liste d'images pleine de produits
Composants Web MDC utilisés dans cet atelier
- Panneau
- Liste d'images
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 ?
Vous avez déjà suivi l'atelier MDC-101 ?
Si vous avez fini l'atelier de programmation MDC-101, votre code devrait être prêt pour commencer cet atelier. Passez à l'étape 3: Ajouter un panneau de navigation.
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-102/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-102/starter
Installer les dépendances du projet
Votre répertoire actuel doit être material-components-web-codelabs/mdc-102/starter.. Exécutez alors la commande suivante:
npm install
Après de nombreuses activités, votre terminal devrait afficher une installation réussie:
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. La page de connexion de Shrine créée dans l'atelier de programmation MDC-101 devrait s'afficher.
Maintenant que la page de connexion est correcte, ajoutons quelques produits dans l'application. Saisissez un nom d'utilisateur et un mot de passe valides, puis cliquez sur le bouton "Suivant" pour accéder à la page d'accueil.
Lorsque l'utilisateur se connecte, une page d'accueil s'affiche, indiquant "Vous avez réussi !". Parfait. À présent, notre utilisateur a besoin d'effectuer des actions et de localiser l'application. Pour résoudre ce problème, ajoutons une barre de navigation.
Les modèles de navigation Material Design offrent une grande facilité d'utilisation. Le panneau de navigation Material propose des fonctionnalités de navigation et d'accès rapide aux autres actions. Ajoutons une plage de dates.
Installer le tiroir et la liste MDC
Pour installer les packages pour le composant des panneaux, exécutez la commande suivante:
npm install @material/drawer @material/list
Ajouter le code HTML
Dans home.html, remplacez "Vous avez réussi !" par le balisage suivant pour le panneau et ses éléments:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>Ajouter le CSS
Dans home.scss, ajoutez les instructions d'importation suivantes après l'importation existante:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";En bas de home.scss, ajoutez les styles suivants:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}Ajouter le code JavaScript
Nous devons instancier la liste des MDC dans le panneau de navigation pour utiliser correctement le clavier. Ouvrez home.js, qui est actuellement vide, et ajoutez le code suivant:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));Actualisez la page à l'adresse http://localhost:8080/home.html. Voici à quoi doit ressembler votre page d'accueil:
La page d'accueil contient désormais un panneau de navigation persistant affichant différents éléments de navigation, le premier étant actif.
Maintenant que notre application est un peu plus structurée, organisons ses contenus en les plaçant dans une liste d'images.
Installer la liste d'images MDC
Pour installer le package pour le composant de liste d'images, exécutez la commande suivante:
npm install @material/image-list
Ajouter le code HTML d'une liste comportant un seul élément
Commençons par ajouter une liste d'images à côté du panneau de navigation. Pour commencer, nous ajoutons un élément, qui se compose d'une image et d'un libellé de texte.
Dans home.html, ajoutez le code HTML suivant après la fin de l'élément <aside>:
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>La liste inclut une classe supplémentaire, product-list, qui appliquera des styles personnalisés, dans ce tutoriel et dans MDC-103.
Ajouter le CSS
Tout d'abord, dans home.scss, ajoutez une importation pour les styles du composant de liste d'images après les importations existantes:
@import "@material/image-list/mdc-image-list";Ajoutez ensuite les styles suivants après les styles de la page d'accueil initiale:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}Ces styles indiquent à la liste d'images d'afficher des images dans quatre colonnes, de sorte que la liste d'images défile indépendamment du panneau.
Actualisez la page. Voici à quoi doit ressembler la page d'accueil:
Une liste d'images étant destinée à afficher plusieurs images dans une collection, nous allons ajouter d'autres images pour mieux comprendre le fonctionnement du composant.
Dans home.html, copiez l'élément <li> existant:
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>puis collez-la 15 fois après l'élément existant (avant la balise de fermeture </ul>). Cela donne un total de 16 images. Si vous n'avez pas à vous soucier des images et des titres uniques, vous pouvez les retrouver dans MDC-103.
Actualiser. Voici à quoi doit ressembler la page d'accueil:
La liste d'images affiche quatre images par ligne, et les images sont automatiquement ajustées à la taille de l'écran disponible.
Votre site propose un flux de base permettant de rediriger l'utilisateur vers la page d'accueil où les produits sont affichés. Quelques lignes de code vous ont suffi pour ajouter un panneau et une liste d'images à votre contenu. La page d'accueil présente désormais une structure et un contenu de base.
Étapes suivantes
Avec le panneau et la liste d'images, vous avez utilisé deux autres composants principaux Material Design de la bibliothèque Web MDC. Pour découvrir d'autres composants, consultez le catalogue Web MDC.
Même si la page d'accueil fonctionne parfaitement, elle n'exprime pas encore de marque ni de point de vue particulier. Dans MDC-103: Utilisation des thèmes de Material Design (couleur, formes, élévation et type), vous pouvez personnaliser le style de ces composants pour exprimer une marque moderne et dynamique.