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 |
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 vestiti e articoli per la casa. Il flusso utente di questa app inizia con una schermata di accesso, che poi porta l'utente a una schermata Home contenente i prodotti.
Material Design è stato recentemente ampliato per offrire a designer e sviluppatori una maggiore flessibilità nell'esprimere il brand del proprio prodotto. In questo codelab, utilizzerai MDC per personalizzare l'app Shrine in modo da riflettere lo stile unico del brand in modi mai visti prima.
Cosa creerai
In questo codelab, personalizzerai Shrine in modo che rifletta il suo brand utilizzando:
- Colore
- Tipografia
- Elevazione
- Forma
- Layout
Componenti e sottosistemi web MDC utilizzati in questo codelab
- Tema
- Tipografia
- Elevazione
- Elenco immagini
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?
Hai seguito il corso MDC-102?
Se hai completato MDC-102, il codice dovrebbe essere pronto per questo codelab. Vai al passaggio 3: modifica 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 questa directory prima di iniziare.
… 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-103/starter
Installa le dipendenze del progetto
Dalla directory iniziale material-components-web-codelabs/mdc-103/starter (dovrebbe essere la directory corrente se segui il passaggio precedente), esegui:
npm install
Vedrai molte attività e, alla fine, il terminale dovrebbe mostrare un'installazione riuscita:
Eseguire l'app iniziale
Nella stessa directory, esegui:
npm start
webpack-dev-server inizierà. Punta il browser su http://localhost:8080/ per visualizzare la pagina.
Operazione riuscita. Dovresti visualizzare la pagina di accesso di Shrine nel browser. Compila i campi Nome utente e Password e fai clic sul pulsante "Avanti" per andare alla home page. Dovrebbe mostrare un riquadro di navigazione a sinistra, accanto a una griglia di immagini dei prodotti.
Sebbene il riquadro di navigazione sia funzionale, facciamolo corrispondere al brand Shrine modificandone il colore, l'elevazione e la tipografia.
Questo tema di colori è stato creato da un designer con colori personalizzati (mostrati nell'immagine di seguito). Contiene colori selezionati dal brand di Shrine e applicati a Material Theme Editor, che li ha espansi per creare una tavolozza più completa. Questi colori non provengono dalle tavolozze dei colori Material del 2014.
Modifichiamo il colore del riquadro di navigazione dell'app Shrine in modo che rifletta questa combinazione di colori.
Ignorare 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 nella parte superiore di _common.scss:
@import "./variables";Aggiungere 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 gli stili seguenti, creando 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. La schermata Home dovrebbe ora avere il seguente aspetto:
Modifichiamo il colore della schermata di accesso in modo che corrisponda alla nostra combinazione di colori.
Aggiungere 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 invocazioni di mixin all'interno del 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 ora il seguente aspetto:
Oltre alle modifiche del colore, il designer ti ha anche fornito una tipografia specifica da utilizzare sul sito. Aggiungiamolo anche al riquadro di navigazione a scomparsa.
Per installare il pacchetto per la tipografia, esegui:
npm install @material/typography
Aggiungere il 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);
...
}Ora definiamo lo stile degli elementi del riquadro.
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;
}Modificare gli elementi e le etichette delle immagini
Per modificare gli elementi e le 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. La schermata Home dovrebbe ora avere il seguente aspetto:
Ora che hai applicato lo stile alla pagina con i colori e la tipografia specifici di Shrine, esaminiamo l'elenco delle immagini che mostrano i prodotti di Shrine. Mettiamo in evidenza i 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";Racchiudere l'elenco di immagini in un nuovo div
In home.html, aggiungi il seguente markup intorno all'elemento <ul>:
<div class="shrine-body">
<ul...>
</div>Modificare l'elevazione utilizzando i mixin 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 le voci dell'elenco di immagini, in modo che sembri fluttuare leggermente sopra la navigazione.
Successivamente, modifichiamo il layout per mostrare le immagini con proporzioni e dimensioni diverse, in modo che ogni immagine appaia unica rispetto alle altre.
Modificare il codice 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. Poi, aggiorna il testo dell'etichetta per ogni immagine. Al termine, dovrebbe avere questo 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:
@include mdc-image-list-masonry-columns(4);Aggiungi poi i seguenti valori di padding alla classe product-list in home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Il codice ora dovrebbe corrispondere a quello incluso nella cartella complete/.
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 come apparirebbe Shrine se la combinazione di colori del brand fosse completamente diversa.
Modificare il CSS
In _variables.scss, sostituisci le variabili dichiarate per il tema principale con le seguenti:
$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 mixin 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-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}Analogamente, nel selettore .shrine-title imposta la proprietà color sul colore on-primary:
.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 ora essere visualizzato nel browser.
Ora vai alla pagina http://localhost:8080/home.html per visualizzare le modifiche alla pagina home.html.
Ora hai creato un'app che rispecchia le 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.