Informazioni su questo codelab
1. Introduzione
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
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:
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.
Operazione riuscita. Dovresti visualizzare la pagina di accesso al Santuario del codelab MDC-101.
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:
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:
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:
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.