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 |
Nei codelab MDC-101 e MDC-102, hai utilizzato Material Components (MDC) per creare le basi di un'app chiamata Shrine, un'app di e-commerce che vende abbigliamento e articoli per la casa. Il flusso utente di questa app inizia con una schermata di accesso, che porta l'utente a una schermata Home contenente prodotti.
Material Design si è recentemente ampliato per offrire a designer e sviluppatori una maggiore flessibilità per esprimere il brand dei propri prodotti. In questo codelab, utilizzerai MDC per personalizzare l'app Santuario in modo che rifletta lo stile unico del brand in più modi che mai.
Cosa creerai
In questo codelab personalizzerai Santuario in modo che rifletta il suo brand utilizzando:
- Colore
- Tipografia
- Elevazione
- Shape
- Layout
Componenti e sottosistemi Web di MDC utilizzati in questo codelab
- Tema
- Tipografia
- Elevazione
- 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-102?
Se hai completato MDC-102, il tuo codice dovrebbe essere pronto per questo codelab. Vai al passaggio 3: Cambiare il colore.
Scarica l'app codelab iniziale
L'app iniziale si trova nella directory material-components-web-codelabs-master/mdc-103/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-103/starter
Installa le dipendenze del progetto
Dalla directory iniziale material-components-web-codelabs/mdc-103/starter (se segui il passaggio precedente dovrebbe essere la tua directory attuale), esegui:
npm install
Vedrai molta attività e, alla fine, il tuo terminale dovrebbe mostrare un'installazione eseguita correttamente:
Esegui l'app iniziale
Nella stessa directory, esegui:
npm start
Verrà avviato webpack-dev-server. Visita il sito http://localhost:8080/ nel browser per visualizzare la pagina.
Operazione riuscita. Dovresti vedere la pagina di accesso di Santuario in esecuzione nel tuo browser. Compila i campi Nome utente e Password, quindi fai clic sul pulsante "Avanti". per andare alla home page. Dovresti visualizzare un riquadro di navigazione a scomparsa sulla sinistra, accanto a una griglia di immagini prodotto.
Sebbene il riquadro di navigazione a scomparsa sia funzionante, cambiane il colore, l'elevazione e gli elementi tipografici per adattarlo al brand del santuario.
3. Cambiare il colore
Questo tema a colori è stato creato da un designer con colori personalizzati (mostrati nell'immagine di seguito). Contiene colori che sono stati selezionati dal brand di Santuario e applicati all'editor dei temi materiali, che li ha ampliati per creare una tavolozza più completa. (questi colori non sono presenti nelle tavolozze dei colori Materiale del 2014).
Cambiamo il colore del riquadro di navigazione a scomparsa dell'app Santuario per riflettere quella combinazione di colori.
Sostituire i colori del tema
Crea un nuovo file denominato _variables.scss contenente quanto segue:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;
Quindi importalo all'inizio di _common.scss:
@import "./variables";
Aggiungere gli stili CSS al riquadro di navigazione a scomparsa
In home.scss, aggiungi la seguente istruzione di importazione dopo le importazioni esistenti:
@import "@material/ripple/mixins";
Poi aggiungi i seguenti stili per creare la classe .shrine-drawer:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}
Aggiorna la pagina all'indirizzo http://localhost:8080/home.html. Ora la schermata Home dovrebbe avere il seguente aspetto:
Cambiamo il colore della schermata di accesso in modo che corrisponda alla nostra combinazione di colori.
Aggiungere gli stili CSS alla pagina di accesso
In login.scss, aggiungi le seguenti righe:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
Inoltre, aggiungi le seguenti chiamate mixin nel selettore CSS .username, .password:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}
Aggiorna la pagina all'indirizzo http://localhost:8080/. La schermata di accesso dovrebbe avere il seguente aspetto:
4. Modificare gli stili di tipografia e di etichetta
Oltre alle modifiche dei colori, il designer ti ha fornito anche elementi tipografici specifici da utilizzare sul sito. Aggiungiamolo anche al riquadro di navigazione a scomparsa.
Per installare il pacchetto per Typography, esegui:
npm install @material/typography
Aggiungere il codice CSS per la tipografia
In home.scss, aggiungi la seguente istruzione di importazione dopo le importazioni esistenti:
@import "@material/typography/mdc-typography";
Quindi aggiungi la seguente chiamata mixin alla classe shrine-title:
.shrine-title {
@include mdc-typography(headline6);
...
}
A questo punto, applica uno stile agli elementi del riquadro a scomparsa.
Aggiungere un separatore di riga
In home.html, aggiungi quanto segue subito dopo l'elemento <a ...>Featured</a>:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Aggiungi i seguenti stili a home.scss:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}
Regolare gli elementi e le etichette dell'immagine
Per regolare elementi ed etichette, aggiungi i seguenti stili a home.scss all'interno del selettore .product-list:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}
Aggiorna la pagina. Ora la schermata Home dovrebbe avere il seguente aspetto:
5. Regola l'elevazione
Ora che hai applicato alla pagina gli stili applicati con colori e caratteri tipografici specifici del Santuario, diamo un'occhiata all'elenco di immagini che mostrano i prodotti del Santuario. Attira l'attenzione sui prodotti dando loro maggiore enfasi.
Per installare il pacchetto per Elevation, esegui:
npm install @material/elevation
Aggiungere l'istruzione di importazione
In home.scss, aggiungi la seguente riga dopo l'ultima istruzione di importazione:
@import "@material/elevation/mdc-elevation";
Aggregare l'elenco delle immagini con un nuovo div
In home.html, aggiungi il seguente markup intorno all'elemento <ul>:
<div class="shrine-body">
<ul...>
</div>
Modificare l'altitudine utilizzando le combinazioni Sass
In home.scss, aggiungi quanto segue:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
Notevole. Hai aggiunto un'ombra al bordo sinistro della superficie bianca dietro gli elementi dell'elenco di immagini, in modo che appaia fluttuante leggermente sopra la barra di navigazione.
6. Modificare il layout
Poi cambia il layout in modo da mostrare le immagini con proporzioni e dimensioni diverse, in modo che ogni immagine risulti unica rispetto alle altre.
Modificare l'HTML
In home.html, aggiorna l'elemento mdc-image-list in modo che contenga la classe mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Aggiungi immagini
In home.html, modifica l'attributo src di ogni elemento img in modo che corrisponda alle immagini che si trovano nella cartella assets. Quindi, aggiorna il testo dell'etichetta per ogni immagine. Al termine, il codice dovrebbe avere il seguente aspetto:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<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>
Aggiornare il CSS
In home.scss, rimuovi il mixin mdc-image-list-standard-columns(4) e sostituiscilo con il seguente mix:
@include mdc-image-list-masonry-columns(4);
Quindi aggiungi i seguenti valori padding alla classe product-list in home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Il tuo codice ora dovrebbe corrispondere al codice incluso nella cartella complete/.
7. Prova con un altro tema
Il colore è un modo efficace per esprimere il tuo brand e un piccolo cambiamento di colore può avere un grande effetto sull'esperienza utente. Per fare una prova, vediamo quale sarebbe l'aspetto di Santuario se la combinazione di colori del brand fosse completamente diversa.
Modificare il CSS
In _variables.scss, sostituisci le variabili che hai dichiarato per il tema principale con quanto segue:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;
In login.scss, rimuovi i mix nel selettore .username, .password. Dovrebbe avere il seguente aspetto:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Inoltre, rimuovi l'override del mixin mdc-button-ink-color nella classe .cancel:
In home.scss, aggiungi la seguente regola alla classe .home:
background-color: $mdc-theme-background;
Nel selettore .shrine-logo-drawer, sostituisci la proprietà fill con il colore on-principale:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Allo stesso modo, all'interno del selettore .shrine-title, imposta la proprietà color sul colore on-principale:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Infine, rimuovi il mixin mdc-elevation utilizzato in precedenza nel selettore .shrine-body.
Crea ed esegui. Il nuovo tema dovrebbe essere visualizzato nel browser.
Ora vai all'indirizzo http://localhost:8080/home.html per vedere le modifiche apportate alla pagina home.html.
8. Riepilogo
Hai creato un'app simile alle specifiche del tuo designer.
Passaggi successivi
Ora hai utilizzato i seguenti componenti MDC: tema, tipografia, elevazione e forma. Puoi esplorare altri componenti e sottosistemi nel catalogo web MDC.