MDC-101 Web: nozioni di base su Material Components (MDC) (Web)

1. Introduzione

I componenti Material (MDC) aiutano 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

Che cosa sono Material Design e i componenti Material per il web?

Material Design è un sistema per creare prodotti digitali audaci e belli. Unendo stile, branding, interazione e movimento in un insieme coerente di principi e componenti, i team di prodotto possono realizzare il loro massimo potenziale di progettazione.

Per il web mobile e il computer, Material Components Web (MDC Web) unisce progettazione e ingegneria con una libreria di componenti per creare coerenza tra app e siti web. I componenti MDC Web risiedono ciascuno nei propri moduli dei nodi, quindi, man mano che il sistema Material Design si evolve, questi componenti possono essere facilmente aggiornati per garantire un'implementazione coerente e perfetta al pixel e il rispetto degli standard di sviluppo front-end di Google. MDC è disponibile anche per Android, iOS e Flutter.

In questo codelab creerai una pagina di accesso utilizzando diversi componenti di MDC Web.

Cosa creerai

Questo codelab è il primo di tre che ti guideranno nella creazione di un'app chiamata Shrine, un sito web di e-commerce che vende abbigliamento e articoli per la casa. Verrà illustrato come personalizzare i componenti per riflettere qualsiasi brand o stile utilizzando MDC Web.

In questo codelab, creerai una pagina di accesso per Shrine che contiene:

• Due campi di testo, uno per inserire un nome utente e l'altro per una password
• Due pulsanti: uno per "Annulla" e uno per "Avanti".
• Il nome del sito web (Santuario)
• Un'immagine del logo di Shrine

I codelab correlati sono disponibili all'indirizzo:

• MDC-102: Material Design Structure and Layout
• MDC-103: Material Design Theming con colore, forma, elevazione e tipo

Al termine di MDC 103, avrai creato un sito web simile a questo:

Componenti web MDC in questo codelab

• Campo di testo
• Pulsante
• Onde

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

Cerchiamo sempre di migliorare i nostri tutorial. Come valuteresti il tuo livello di esperienza nello sviluppo web?

Principiante Intermedio Avanzato

2. Configurazione dell'ambiente di sviluppo

Scarica l'app codelab iniziale

Scarica l'app iniziale

L'app iniziale si trova nella directory material-components-web-codelabs-master/mdc-101/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.

...o 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-101/starter

Per ulteriore assistenza: Clonazione di un repository da GitHub

Installa le dipendenze del progetto

Dalla directory iniziale, esegui:

npm install

Vedrai molte attività e, alla fine, il terminale dovrebbe mostrare un'installazione riuscita:

In caso contrario, esegui npm audit fix.

MDC Web utilizza un preprocessor CSS chiamato Sass. Se utilizzi un altro pre-processore 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.

Esegui l'app iniziale

Nella stessa directory, esegui:

npm start

È utile eseguire npm start in una scheda o finestra del terminale separata, in modo che il server locale possa continuare a essere eseguito mentre modifichiamo il codice.

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. Il codice iniziale per la pagina di accesso di Shrine dovrebbe essere in esecuzione nel browser. Dovresti vedere il nome "Shrine" e il logo di Shrine appena sotto.

Dai un'occhiata al codice

Metadati in index.html

Nella directory iniziale, apri index.html con il tuo editor di codice preferito. Deve contenere:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

Qui viene utilizzato un tag <link> per caricare il file bundle-login.css generato da webpack e un tag <script> include il file bundle-login.js. Inoltre, includiamo normalize.css per un rendering coerente tra i browser, nonché il carattere Roboto di Google Fonts.

Stili personalizzati in login.scss

I componenti MDC Web sono stilizzati utilizzando Sass, un linguaggio di estensione per CSS. Sass viene compilato in CSS normale utilizzando webpack. I file Sass in MDC Web sono scritti in una sintassi chiamata SCSS e hanno estensioni di file che terminano con .scss.

I componenti web MDC sono stilizzati utilizzando classi CSS mdc-*, ad esempio la classe mdc-text-field. MDC Web considera la sua struttura DOM come parte della sua API pubblica.

In generale, ti consigliamo di apportare modifiche allo stile personalizzato dei componenti utilizzando le tue classi. Potresti aver notato alcune classi CSS personalizzate nel codice HTML riportato sopra, ad esempio shrine-logo. Questi stili sono definiti in login.scss per aggiungere stili di base alla pagina.

Apri login.scss e vedrai i seguenti stili per la pagina di accesso:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

Potresti aver notato anche home.scss e home.js. Verranno utilizzati nel codelab MDC-102 e possono essere ignorati per ora.

Ora che hai familiarità con il codice iniziale, implementiamo il nostro primo componente.

3. Aggiungere campi di testo

Per iniziare, aggiungeremo due campi di testo alla nostra pagina di accesso, in cui gli utenti potranno inserire il proprio nome utente e la propria password. Utilizzeremo il componente Campo di testo MDC, che include funzionalità integrate che mostrano un'etichetta mobile e attivano un'increspatura al tocco.

I campi di testo Material Design sono stati notevolmente migliorati per aumentare la flessibilità del brand, con miglioramenti supportati da un'ampia ricerca sull'esperienza utente (UX) per una migliore usabilità e un migliore design visivo.

Scopri di più sui campi di testo migliorati nell'articolo delle linee guida di Material.

Installa il campo di testo MDC

I componenti web MDC vengono pubblicati tramite pacchetti NPM. Per installare il pacchetto per il componente Campo di testo, esegui:

npm install @material/textfield@^6.0.0

Puoi anche installare tutti i componenti web MDC contemporaneamente eseguendo:

npm install material-components-web@^6.0.0

Per ulteriori informazioni sull'utilizzo del pacchetto web MDC principale, consulta questa pagina.

Aggiungere il codice HTML

In index.html, aggiungi quanto segue all'interno dell'elemento <form> nel corpo:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

La struttura DOM del campo di testo MDC è composta da diverse parti:

• L'elemento principale, mdc-text-field
• Sottoelementi mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label e mdc-line-ripple

Nota:il doppio trattino basso (__) e il doppio trattino (--) nei nomi di questi selettori derivano dal pattern BEM, un metodo utilizzato per strutturare semanticamente le classi CSS. MDC Web segue una versione modificata di questo pattern, come mostrato in questo codelab.

Aggiungere il CSS

In login.scss, aggiungi la seguente istruzione di importazione dopo l'importazione esistente:

@import "@material/textfield/mdc-text-field";

Nello stesso file, aggiungi i seguenti stili per allineare e centrare i campi di testo:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

Aggiungere JavaScript

Apri login.js, che al momento è vuoto. Aggiungi il seguente codice per importare e creare un'istanza dei campi di testo:

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

Aggiungere la convalida HTML5

I campi di testo indicano se l'input del campo è valido o contiene un errore, utilizzando gli attributi forniti dall'API di convalida dei moduli di HTML5.

Al termine del corso dovreste essere in grado di:

• Aggiungi l'attributo required agli elementi mdc-text-field__input dei campi di testo Nome utente e Password
• Imposta l'attributo minlength dell'elemento mdc-text-field__input del campo di testo Password su "8"

Modifica i due elementi <label class="mdc-text-field mdc-text-field--filled"> in modo che abbiano questo aspetto:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

Aggiorna la pagina all'indirizzo http://localhost:8080/. A questo punto dovresti visualizzare una pagina con due campi di testo per nome utente e password.

Fai clic sui campi di testo per visualizzare l'animazione dell'etichetta mobile e l'animazione dell'increspatura della linea (il bordo inferiore che si increspa verso l'esterno):

Informazioni sui campi di testo:

Il campo di testo MDC utilizza un elemento HTML <input> nativo, quindi può essere utilizzato con elementi <form> nativi in HTML.

• Il campo di testo MDC riflette automaticamente gli stati di passaggio del mouse e di messa a fuoco.
• Il campo di testo MDC include molte funzionalità e varianti di stile, come testo di supporto, accoppiamento di icone, una variante di stile contornato e un'area di testo. Dai un'occhiata qui.

4. Aggiungere pulsanti

A questo punto, aggiungeremo due pulsanti alla nostra pagina di accesso: "Annulla" e "Avanti". Utilizzeremo il componente Pulsante MDC, insieme al componente Ripple MDC, per completare l'iconico effetto ripple di inchiostro di Material Design.

Installare il pulsante MDC

Per installare il pacchetto per il componente pulsante, esegui:

npm install @material/button@^6.0.0

Aggiungere il codice HTML

In index.html, aggiungi quanto segue sotto il tag di chiusura dell'elemento <label class="mdc-text-field mdc-text-field--filled password">:

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

Per il pulsante "Annulla", utilizziamo lo stile predefinito. Tuttavia, il pulsante "Avanti" utilizza una variante di stile in rilievo, indicata dalla classe mdc-button--raised.

Per allinearli facilmente in un secondo momento, racchiudiamo i due elementi mdc-button in un elemento <div>.

Nota: il componente pulsante MDC su MDC Web non richiede JavaScript, il che lo rende più leggero e veloce da usare con una connettività di rete limitata.

Aggiungere il CSS

In login.scss, aggiungi la seguente istruzione di importazione dopo le importazioni esistenti:

@import "@material/button/mdc-button";

Per allineare i pulsanti e aggiungere un margine intorno, aggiungi i seguenti stili a login.scss:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

Aggiungere un effetto increspatura ai pulsanti

Quando l'utente tocca o fa clic su un pulsante, deve visualizzare un feedback sotto forma di increspatura di inchiostro. Il componente dell'effetto increspatura richiede JavaScript, quindi lo aggiungeremo alla pagina.

Per installare il pacchetto per il componente ripple, esegui:

npm install @material/ripple@^6.0.0

Nella parte superiore di login.js, aggiungi la seguente istruzione di importazione:

import {MDCRipple} from '@material/ripple';

Per creare le increspature, aggiungi quanto segue a login.js:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Poiché non è necessario conservare un riferimento all'istanza ripple, non è necessario assegnarla a una variabile.

È tutto. Aggiorna la pagina. Quando fai clic su ogni pulsante, viene visualizzata un'increspatura di inchiostro.

Esistono molte altre varianti di stile del pulsante MDC, ad esempio non rialzato e contornato. Dai un'occhiata qui.

Compila i campi di testo con valori validi e premi il pulsante "AVANTI". Ce l'hai fatta! Continuerai a lavorare su questa pagina in MDC-102.

Nota:ai fini di questo esercizio, il modulo viene inviato tramite HTTP GET e non è previsto alcun trattamento lato server. Qualsiasi sito o applicazione di produzione utilizzerebbe HTTP POST (aggiungendo method="POST" all'elemento <form>) per l'invio a un endpoint server e la verifica delle informazioni di accesso.

5. Riepilogo

Utilizzando il markup HTML di base e poche righe di CSS e JavaScript, la libreria Material Components for the web ti ha aiutato a creare una splendida pagina di accesso conforme alle linee guida di Material Design e con un aspetto e un comportamento coerenti su tutti i dispositivi.

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

Puoi testare la tua versione della pagina rispetto alla pagina nella directory. Non dimenticare di eseguire prima npm install in quella directory.

Passaggi successivi

Campo di testo, Pulsante e Ripple sono tre componenti principali della libreria MDC Web, ma ce ne sono molti altri. Puoi anche esplorare gli altri componenti di MDC Web.

Per scoprire di più sul menu di navigazione e sull'elenco di immagini, consulta la pagina MDC-102: Material Design Structure and Layout. Grazie per aver provato i componenti Material. Ci auguriamo che questo codelab ti sia piaciuto.

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