MDC-102 Web: struttura e layout dei materiali (web)

MDC-102 Web:
struttura e layout dei materiali (web)

Informazioni su questo codelab

subjectUltimo aggiornamento: ott 11, 2020
account_circleScritto da: Liz Mitchell, Abhinay Omkar

1. Introduzione

logo_components_color_2x_web_96dp.png

Material Components (MDC) consente agli sviluppatori di implementare Material Design. Creato dal team di ingegneri e designer UX di Google, MDC è dotato di decine di componenti UI belli e funzionali ed è disponibile per Android, iOS, web e Flutter.material.io/develop

Nel codelab MDC-101, hai utilizzato due componenti materiali (MDC) per creare una UI per una pagina di accesso: il campo di testo e il pulsante. Ora approfondiamo questo aspetto aggiungendo navigazione, struttura e dati.

Cosa creerai

In questo codelab, creerai una home page per un'app chiamata Shrine, un'app di e-commerce che vende abbigliamento e articoli per la casa. Contiene:

  • Un riquadro di navigazione a scomparsa
  • Un elenco di immagini pieno di prodotti

e2f359c254988d75.png

Componenti web MDC in questo codelab

  • Riquadro a scomparsa
  • Elenco immagini

Che cosa ti serve

  • Una versione recente di Node.js (integrata in npm, un gestore di pacchetti JavaScript).
  • Il codice campione (da scaricare nel passaggio successivo)
  • Conoscenza di base di HTML, CSS e JavaScript

Come giudichi il tuo livello di esperienza nello sviluppo web?

2. Configurazione dell'ambiente di sviluppo

Vuoi continuare da MDC-101?

Se hai completato MDC-101, il tuo codice dovrebbe essere preparato per questo codelab. Vai al passaggio 3: aggiungi un riquadro di navigazione a scomparsa.

Scarica l'app codelab iniziale

L'app iniziale si trova nella directory material-components-web-codelabs-master/mdc-102/starter. Assicurati di cd in quella directory prima di iniziare.

...o clonarlo da GitHub

Per clonare questo codelab da GitHub, esegui questi comandi:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-102/starter

Installa le dipendenze del progetto

La directory attuale dovrebbe essere material-components-web-codelabs/mdc-102/starter.. Da lì, esegui questo comando:

npm install

Quando vengono visualizzate molte attività, il terminale dovrebbe indicare che l'installazione è riuscita:

23003b0e5fdf9077.png

Esegui l'app iniziale

Nella stessa directory, esegui questo comando:

npm start

Verrà avviato webpack-dev-server. Visita il sito http://localhost:8080/ nel browser per visualizzare la pagina.

4e04758051693865.png

Operazione riuscita. Dovresti visualizzare la pagina di accesso al Santuario del codelab MDC-101.

6c206785707bee2e.png

Ora che la pagina di accesso è corretta, completiamo l'app con alcuni prodotti. Inserisci un nome utente e una password validi, poi fai clic sul pulsante "Avanti" per andare alla home page.

3. Aggiungi un riquadro di navigazione a scomparsa

Quando l'utente accede, viene visualizzata una home page con il messaggio "Ce l'hai fatta!". Fantastico. Ma ora i nostri utenti hanno bisogno di azioni da intraprendere e di avere un'idea di dove si trovano nell'app. Per aiutarti, aggiungiamo la navigazione.

I pattern di navigazione Material Design offrono un elevato grado di usabilità. Il riquadro di navigazione a scomparsa Materiale offre la navigazione e l'accesso rapido ad altre azioni. Impostiamone uno.

Installa riquadro a scomparsa ed elenco MDC

Per installare i pacchetti per il componente del riquadro a scomparsa, esegui:

npm install @material/drawer @material/list

Aggiungi il codice HTML

In home.html, sostituisci "Ce l'hai fatta!". con il seguente markup per il riquadro a scomparsa e i relativi elementi:

<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>

Aggiungere il CSS

In home.scss, aggiungi le seguenti istruzioni di importazione dopo l'importazione esistente:

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

Nella parte inferiore di home.scss, aggiungi i seguenti stili:

.shrine-logo-drawer {
  display: block;
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  text-align: center;
  margin: 5px auto;
}

Aggiungere il codice JavaScript

Per una corretta navigazione con la tastiera, è necessario creare un'istanza per l'elenco MDC all'interno del riquadro di navigazione a scomparsa. Apri home.js, che al momento è vuoto, e aggiungi il seguente codice:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

Aggiorna la pagina all'indirizzo http://localhost:8080/home.html. La tua home page dovrebbe avere il seguente aspetto:

9c145acccbc28214.png

Ora la home page ha un riquadro di navigazione a scomparsa permanente che mostra vari elementi di navigazione, con il primo elemento attivo.

4. Aggiungi immagini con etichette di testo

Ora che la nostra app ha una struttura strutturata, possiamo organizzare i contenuti inserendoli in un elenco di immagini.

Installa l'elenco di immagini MDC

Per installare il pacchetto per il componente elenco immagini, esegui:

npm install @material/image-list

Aggiungere il codice HTML di un elenco contenente un singolo elemento

Per iniziare, aggiungi un elenco di immagini accanto al riquadro di navigazione a scomparsa. Inizieremo l'elenco aggiungendo un singolo elemento, ovvero un'immagine e un'etichetta di testo.

In home.html, aggiungi il seguente codice HTML dopo la fine dell'elemento <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>

L'elenco include una classe aggiuntiva, product-list, che applicherà gli stili personalizzati, sia in questo tutorial sia in MDC-103.

Aggiungere il CSS

Innanzitutto, in home.scss, aggiungi un'importazione per gli stili dei componenti dell'elenco di immagini dopo le importazioni esistenti:

@import "@material/image-list/mdc-image-list";

Successivamente, aggiungi i seguenti stili dopo gli stili iniziali della home page:

.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

Questi stili indicano all'elenco di immagini di mostrarle su quattro colonne, assicurando che l'elenco scorra indipendentemente dal riquadro a scomparsa.

Aggiorna la pagina. La home page dovrebbe avere il seguente aspetto:

5362b330204ffd58.png

Un elenco di immagini ha lo scopo di visualizzare molte immagini di una raccolta, quindi aggiungiamo altre immagini per capire meglio come funziona il componente.

In home.html, copia l'elemento <li> esistente:

  <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>

Dopodiché incollalo dopo l'elemento esistente (prima del tag di chiusura </ul>) 15 volte. Il risultato sarà un totale di 16 immagini. Non devi ancora preoccuparti di immagini e titoli unici. che parleremo dell'MDC-103.

Aggiorna. Ora la home page dovrebbe avere il seguente aspetto:

e2f359c254988d75.png

L'elenco delle immagini mostra quattro immagini per riga e le immagini vengono ridimensionate automaticamente per adattarsi allo spazio disponibile sullo schermo.

5. Riepilogo

Il tuo sito ha un flusso di base che porta l'utente dalla pagina di accesso a una home page, dove è possibile visualizzare i prodotti. In poche righe di codice, hai aggiunto un riquadro a scomparsa e un elenco di immagini per presentare i contenuti. La home page ha ora una struttura e contenuti di base.

Passaggi successivi

Con il riquadro a scomparsa e l'elenco delle immagini, hai utilizzato altri due componenti principali di Material Design della libreria web MDC. Per esaminare altri componenti, visita il MDC Web Catalog.

Sebbene sia completamente funzionante, la home page non esprime ancora un brand o punto di vista particolare. In MDC-103: Tema di Material Design con colore, forma, altezza e tipo, personalizzerai lo stile di questi componenti per esprimere un brand vivace e moderno.

Ho completato questo codelab con una quantità di tempo e di sforzi ragionevoli

Vorrei continuare a utilizzare Material Components in futuro