À propos de cet atelier de programmation
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 une UI de 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 une application appelée Shrine, une application d'e-commerce qui vend des vêtements et des articles pour la maison. Cet écran contiendra :
- Un panneau de navigation
- Une liste d'images de produits
Composants Web de 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 de 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 de 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 devrait être material-components-web-codelabs/mdc-102/starter.
. Ensuite, exécutez la commande suivante:
npm install
Après une activité intense, le terminal devrait 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
webpack-dev-server
va démarrer. Accédez à l'URL 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 semble correcte, remplissons l'application avec quelques produits. 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 avec le message "Vous l'avez fait !". Parfait ! À présent, notre utilisateur a besoin d'actions à effectuer et d'un moyen de savoir où il se trouve dans l'application. Pour l'aider, ajoutons la navigation.
Les modèles de navigation Material Design offrent un haut degré d'usabilité. Le panneau de navigation Material permet de naviguer et d'accéder rapidement à d'autres actions. Ajoutons une plage de dates.
Installer le panneau de navigation et la liste MDC
Pour installer les packages du composant du panneau de navigation, exécutez la commande suivante :
npm install @material/drawer @material/list
Ajouter le code HTML
Dans home.html
, remplacez "You did it!" (Vous l'avez fait !) 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 MDC dans le panneau de navigation pour une navigation correcte au 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 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 divers éléments de navigation, dont le premier est 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 d'une liste ne comportant qu'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, composé d'une image et d'un libellé textuel.
Dans home.html
, ajoutez le code HTML suivant à 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 comprend 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 des 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 qu'elle défile indépendamment du panneau.
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 d'une collection. Ajoutons donc 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>
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 préoccupez 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 redimensionnées automatiquement 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. En quelques lignes de code, vous avez ajouté un panneau de navigation et une liste d'images pour présenter du 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, accédez au Catalogue Web de MDC.
Bien qu'elle soit entièrement fonctionnelle, la page d'accueil n'exprime pas encore de marque ni de 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.