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

MDC-102 Web:
Material Structure and Layout (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 da un team di ingegneri e designer UX di Google, MDC offre dozzine di componenti dell'interfaccia utente 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 prodotti per la casa. Contiene:

  • Un riquadro di navigazione a scomparsa
  • Un elenco di immagini 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 di esempio (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 il corso MDC-101, il tuo codice dovrebbe essere pronto per questo codelab. Vai al passaggio 3: aggiungi un riquadro di navigazione.

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 corrente dovrebbe essere material-components-web-codelabs/mdc-102/starter.. Da qui, esegui il seguente comando:

npm install

Dopo che viene visualizzata molta attività, il terminale dovrebbe mostrare un'installazione riuscita:

23003b0e5fdf9077.png

Eseguire l'app iniziale

Nella stessa directory, esegui questo comando:

npm start

Inizierà webpack-dev-server. Apri il browser all'indirizzo http://localhost:8080/ 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, quindi fai clic sul pulsante "Avanti" per andare alla home page.

3. Aggiungere un riquadro di navigazione a scomparsa

Quando l'utente accede, viene visualizzata una home page con il messaggio "Ce l'hai fatta!". Fantastico. Ora, però, il nostro utente ha bisogno di azioni da intraprendere e di capire dove si trova nell'app. Per aiutarlo, 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 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;
}

Aggiungi il codice JavaScript

Dobbiamo creare un'istanza dell'elenco MDC all'interno del riquadro di navigazione per una corretta navigazione da tastiera. 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 certa struttura, organizziamo i contenuti inserendoli in un elenco di immagini.

Installa l'elenco di immagini MDC

Per installare il pacchetto per il componente dell'elenco di immagini, esegui:

npm install @material/image-list

Aggiungere il codice HTML per un elenco con un elemento

Iniziamo aggiungendo un elenco di immagini accanto al riquadro di navigazione. 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.

Aggiungi 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 mostrano le immagini in quattro colonne, garantendo che l'elenco delle immagini scorra indipendentemente dal riquadro.

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

5362b330204ffd58.png

Un elenco di immagini è progettato per mostrare molte immagini in una raccolta, quindi aggiungi altre immagini per capire meglio il funzionamento del 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 preoccuparti ancora delle immagini e dei titoli unici: troverai quelli dell'MDC-103.

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

e2f359c254988d75.png

L'elenco di immagini mostra quattro immagini per riga e le immagini vengono ridimensionate automaticamente in base allo spazio sullo schermo disponibile.

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 e un elenco di immagini per presentare i contenuti. La home page ora ha una struttura e contenuti di base.

Passaggi successivi

Con il riquadro laterale e l'elenco di immagini, ora hai utilizzato altri due componenti di base di Material Design dalla raccolta web MDC. Puoi esplorare altri componenti visitando il catalogo web MDC.

Sebbene sia completamente funzionante, la home page non esprime ancora un brand o punto di vista particolare. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type, personalizzerai lo stile di questi componenti per esprimere un brand vivace e moderno.

Ho potuto completare questo codelab con un impegno e un tempo ragionevoli

Vorrei continuare a utilizzare Material Components in futuro