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

Material Components (MDC) aiuta gli sviluppatori a implementare Material Design. Creato da un team di ingegneri e progettisti UX di Google, MDC include 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 Material (MDC) per creare un'interfaccia utente della pagina di accesso: il campo di testo e il pulsante. Ora ampliamo questo concetto 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 pieno di prodotti

Questo è il secondo di tre codelab che ti guidano nella creazione di un sito per un prodotto chiamato Shrine. Ti consigliamo di svolgere tutti i codelab in ordine, poiché sono in sequenza.

I codelab correlati sono disponibili all'indirizzo:

• MDC-101: Nozioni di base sui componenti Material (MDC)
• MDC-103: Material Design Theming con colore, forma, elevazione e tipo

Al termine di MDC-103, avrai creato un sito web simile al seguente:

Componenti web MDC in questo codelab

• Riquadro a scomparsa
• Elenco immagini

In questo codelab, utilizzerai i componenti predefiniti forniti da MDC Web. Imparerai a personalizzarli in MDC-103: Material Design Theming with Color, Shape, Elevation and Type.

Che cosa ti serve

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

Come valuteresti il tuo livello di esperienza nello sviluppo web?

Principiante Intermedio Avanzato

Hai seguito il corso MDC-101?

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

Scarica l'app codelab iniziale

Scaricare l'app iniziale

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

Prendi nota del suffisso -master nel nome della directory radice. Se scarichi l'app iniziale dal pulsante qui sopra, aggiungi il suffisso -master ogni volta che viene fatto riferimento alla directory principale per il resto di questo codelab.

… oppure clonalo da GitHub

Per clonare questo codelab da GitHub, esegui i seguenti comandi:

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

Per ulteriore assistenza: Clonazione di un repository da GitHub

Installa le dipendenze del progetto

La directory corrente dovrebbe essere material-components-web-codelabs/mdc-102/starter.. Da qui, esegui il comando seguente:

npm install

Dopo che sono state visualizzate molte attività, il terminale dovrebbe mostrare un'installazione riuscita:

MDC Web utilizza un pre-processore CSS chiamato Sass. Se utilizzi un altro pre-elaboratore CSS (o nessuno), non preoccuparti. Puoi utilizzare Sass insieme al preprocessor corrente installando l'interfaccia a riga di comando sass o utilizzando un plug-in (ad esempio sass-loader per Webpack, gulp-sass per Gulp o grunt-sass per Grunt) nella toolchain di build.

Affinché il nostro codice funzioni nei browser meno recenti come IE 11, utilizziamo un transpiler chiamato Babel per transcompilare la sintassi JavaScript ES2015 di MDC Web nella sintassi JavaScript ES5.

Utilizzeremo webpack per raggruppare i nostri file e pubblicare il nostro sito localmente. La configurazione di webpack per questo progetto è già stata impostata per te nel file webpack.config.js. Per maggiori dettagli sulla configurazione, consulta la Guida introduttiva.

Eseguire l'app iniziale

Nella stessa directory, esegui questo comando:

npm start

webpack-dev-server inizierà. Punta il browser su http://localhost:8080/ per visualizzare la pagina.

Se non sei riuscito a eseguire npm install o npm start, interrompi la procedura e risolvi i problemi relativi all'ambiente di sviluppo.

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

Ora che la pagina di accesso ha un bell'aspetto, inseriamo alcuni prodotti nell'app. Inserisci un nome utente e una password validi, quindi fai clic sul pulsante "Avanti" per andare alla home page.

In alternativa, vai all'indirizzo http://localhost:8080/home.html per accedere alla home page.

Quando l'utente esegue l'accesso, viene visualizzata una home page con il messaggio "Ce l'hai fatta!". Fantastico. Ora l'utente ha bisogno di azioni da intraprendere e di capire dove si trova nell'app. Per aiutarlo, aggiungiamo la navigazione.

Per navigazione si intendono i componenti, le interazioni, gli indizi visivi e l'architettura delle informazioni che consentono agli utenti di spostarsi all'interno di un'app o di un sito. In questo modo, i contenuti e le funzionalità sono più facili da trovare e le attività da completare.

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

Installare il riquadro e l'elenco MDC

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

npm install @material/drawer @material/list

Nota:installiamo il componente elenco oltre al riquadro, perché il markup del riquadro utilizza il componente elenco per i suoi elementi di navigazione.

Aggiungere 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;
}

Per questo codelab, ti servono solo gli stili di base per i componenti del riquadro estraibile e dell'elenco. Avrai la possibilità di personalizzare questi componenti in MDC 103: Material Design Theming with Color, Shape, Elevation and Type.

Aggiungere JavaScript

Dobbiamo istanziare l'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'));

Nota:in questo codelab utilizziamo la variante standard del riquadro di navigazione. La variante standard non ha una logica specifica per il riquadro, quindi istanziamo MDCList direttamente al suo interno. Esistono anche varianti chiudibili e modali, che utilizzano un componente MDCDrawer dedicato per funzionalità aggiuntive. Per saperne di più sulle varianti del riquadro di navigazione MDC, consulta la documentazione.

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

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

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

Il componente Elenco immagini è progettato per visualizzare un insieme di immagini in un pattern ripetuto. Queste immagini possono essere accompagnate da informazioni di supporto, come etichette di testo.

Installare l'elenco di immagini MDC

Per installare il pacchetto per il componente Elenco 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, costituito da 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à stili personalizzati sia in questo tutorial sia in MDC-103.

Aggiungere il CSS

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

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

Dopodiché, aggiungi gli stili seguenti 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 visualizzare le immagini su quattro colonne, garantendo che l'elenco di immagini scorra indipendentemente dal riquadro.

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

Un elenco di immagini è progettato per visualizzare molte immagini in una raccolta, quindi aggiungiamone altre 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>

Poi incollalo 15 volte dopo l'elemento esistente (prima del tag di chiusura </ul>). Il risultato sarà un totale di 16 immagini. Non preoccuparti ancora di immagini e titoli unici, li vedrai in MDC-103.

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

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

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

L'app MDC-102 completata è disponibile in questa directory: material-components-web-codelabs/mdc-102/complete

Puoi testare la tua versione dell'app rispetto a quella nella directory. Non dimenticare di eseguire prima npm install in quella directory.

Passaggi successivi

Con il riquadro e l'elenco delle immagini, ora hai utilizzato altri due componenti principali di Material Design della libreria MDC Web. Puoi esplorare altri componenti visitando il catalogo web MDC.

Sebbene sia completamente funzionante, la home page non esprime ancora un brand o un 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.

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Totalmente d'accordo D'accordo Indifferente In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare i componenti Material in futuro

Totalmente d'accordo D'accordo Indifferente In disaccordo Totalmente in disaccordo