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. |
Dans l'atelier de programmation MDC-101, vous avez utilisé deux composants Material Components (MDC) pour créer l'UI d'une page de connexion : le champ de texte et le bouton. Sur ces bases, enrichissons notre application en y ajoutant navigation, structure et 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 :
- Panneau de navigation
- Une liste d'images de produits
Composants Web MDC dans cet atelier de programmation
- 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 ?
2. Configurer l'environnement de développement
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 : Ajoutez 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. 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-102/starter
Installer les dépendances du projet
Votre répertoire actuel doit être material-components-web-codelabs/mdc-102/starter.. Exécutez ensuite la commande suivante :
npm install
Une fois qu'une grande quantité d'activité s'affiche, votre terminal doit indiquer que l'installation a réussi :
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 ! 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 en place, 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.
3. Ajouter un panneau de navigation
Lorsque l'utilisateur se connecte, une page d'accueil s'affiche et indique "Bravo !". Parfait ! À présent, notre utilisateur a besoin d'actions à effectuer et d'un moyen de savoir où il se trouve dans l'application. Pour résoudre ce problème, ajoutons la navigation.
Les formats de navigation Material Design offrent une grande facilité d'utilisation. Le panneau de navigation Material permet de naviguer et d'accéder rapidement à d'autres actions. Ajoutons une plage de dates.
Installer MDC Drawer et List
Pour installer les packages du composant du tiroir, exécutez la commande suivante :
npm install @material/drawer @material/list
Ajouter le code HTML
Dans home.html, remplacez "You did it!" (Vous avez réussi !) par le balisage suivant pour le tiroir 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 code 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 MDC à l'intérieur du panneau de navigation pour une navigation au clavier appropriée. 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 http://localhost:8080/home.html. Votre page d'accueil devrait maintenant se présenter comme suit :
La page d'accueil comporte désormais un panneau de navigation persistant affichant différents éléments de navigation, le premier étant actif.
4. Ajouter des images avec des libellés textuels
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 du composant de liste d'images, exécutez la commande suivante :
npm install @material/image-list
Ajouter le code HTML pour une liste avec un élément
Commençons par ajouter une liste d'images à côté du panneau de navigation. Nous allons commencer la liste en ajoutant un seul élément, qui se compose d'une image et d'un libellé textuel.
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, à la fois dans ce tutoriel et dans MDC-103.
Ajouter le code CSS
Tout d'abord, dans home.scss, ajoutez une importation pour les styles de composants de la 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 les images sur quatre colonnes, en veillant à ce que la liste d'images défile indépendamment du tiroir.
Actualisez la page. La page d'accueil devrait maintenant se présenter comme suit :
Une liste d'images est destinée à afficher de nombreuses images dans une collection. Ajoutons donc d'autres images pour mieux voir comment fonctionne le 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>
Collez-le ensuite 15 fois après l'élément existant (avant la balise de fermeture </ul>). Vous obtiendrez ainsi un total de 16 images. Ne vous inquiétez pas encore des images et des titres uniques. Vous y reviendrez dans MDC-103.
Actualiser. La page d'accueil devrait maintenant se présenter comme suit :
La liste d'images affiche quatre images par ligne, et les images sont automatiquement redimensionnées pour s'adapter à l'espace disponible à l'écran.
5. Récapitulatif
Votre site propose un fonctionnement de base permettant à l'utilisateur de passer de la page de connexion à une page d'accueil où les produits sont affichés. Quelques lignes de code vous ont suffi pour ajouter un tiroir et une liste d'images afin de présenter du contenu. La page d'accueil présente désormais une structure et un contenu de base.
Étapes suivantes
Avec le tiroir et la liste d'images, vous avez utilisé deux autres composants essentiels de Material Design de la bibliothèque MDC-Web. Pour découvrir d'autres composants, consultez le catalogue MDC Web.
Même si la page d'accueil fonctionne parfaitement, elle ne reflète pas encore une identité de marque ni un point de vue particulier. Dans l'atelier MDC-103 : Utilisation des thèmes de Material Design (couleur, formes, élévation et type), vous allez personnaliser le style de ces composants pour exprimer une marque moderne et dynamique.