À 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. Développons maintenant cela en ajoutant la navigation, la structure et les 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 pleine 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 d'accéder à ce répertoire avec la commande cd 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
Lorsqu'une activité importante 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
webpack-dev-server va démarrer. Saisissez 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 doit 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 "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 avez réussi !". Parfait ! Mais maintenant, notre utilisateur a besoin d'actions à effectuer et de savoir où il se trouve dans l'application. Pour vous 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 et la liste MDC
Pour installer les packages du composant Drawer, exécutez la commande suivante:
npm install @material/drawer @material/list
Ajouter le code HTML
Dans home.html, remplacez "Vous avez réussi !" avec 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 que la navigation au clavier se déroule correctement. 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 maintenant un panneau de navigation persistant qui affiche différents éléments de navigation, le premier élément étant actif.
4. Ajouter des images avec des libellés textuels
Maintenant que notre application a une structure, nous allons organiser son contenu en le 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, qui se compose d'une image et d'un libellé.
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";
Ensuite, ajoutez les styles suivants après les styles de la page d'accueil initiales:
.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 16 images au total. Ne vous préoccupez pas encore des images et des titres uniques. vous accéderez à ceux
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 s'adaptent automatiquement à l'espace disponible à l'écran.
5. Récapitulatif
Votre site suit une procédure basique qui redirige l'utilisateur de la page de connexion vers une page d'accueil où les produits peuvent être consultés. En seulement quelques lignes de code, vous avez ajouté un panneau 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 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.