Informazioni su questo codelab
1. Introduzione
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
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:
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.
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, 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:
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:
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:
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.