MDC-102 Web: Structure et mise en page Material (Web)

MDC-102 Web :
Structure et mise en page Material (Web)

À propos de cet atelier de programmation

subjectDernière mise à jour : oct. 11, 2020
account_circleRédigé par Liz Mitchell, Abhinay Omkar

1. Introduction

logo_components_color_2x_web_96dp.png

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

e2f359c254988d75.png

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 :

23003b0e5fdf9077.png

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.

4e04758051693865.png

Opération réussie. La page de connexion de Shrine créée dans l'atelier de programmation MDC-101 devrait s'afficher.

6c206785707bee2e.png

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 :

9c145acccbc28214.png

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 :

5362b330204ffd58.png

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:

e2f359c254988d75.png

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.

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

Je souhaite continuer à utiliser Material Components