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

1. Introduzione

I componenti Material (MDC) aiutano gli sviluppatori a implementare Material Design. Creati da un team di ingegneri e progettisti UX di Google, i componenti MDC includono decine di componenti UI belli e funzionali e sono disponibili 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 la creazione di prodotti digitali audaci e accattivanti. 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 desktop e il web mobile, Material Components Web (MDC Web) unisce progettazione e ingegneria con una libreria di componenti per creare coerenza tra app e siti web. Ogni componente MDC Web risiede nei propri moduli Node, quindi, man mano che il sistema Material Design si evolve, questi componenti possono essere aggiornati facilmente per garantire un'implementazione coerente e perfetta a livello di 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.

Che cosa creerai

Questo codelab è il primo di tre codelab che ti guideranno nella creazione di un'app chiamata Shrine, un sito web di e-commerce che vende abbigliamento e articoli per la casa. Ti mostrerà 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 (Shrine)
• Un'immagine del logo di Shrine

I codelab correlati sono disponibili all'indirizzo:

• MDC-102: struttura e layout di Material Design
• MDC-103: temi di Material Design con colore, forma, elevazione e tipo

Al termine di MDC 103, creerai un sito web simile al seguente:

Componenti MDC Web 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: temi di Material Design con colore, forma, elevazione e tipo.

Che cosa ti serve

• Una versione recente di Node.js (che viene fornita in bundle con npm, un gestore di pacchetti JavaScript).
• Il codice campione (da scaricare nel passaggio successivo)
• Conoscenze di base di HTML, CSS e JavaScript

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

Principiante Intermedio Esperto

2. Configurazione dell'ambiente di sviluppo

Scarica l'app di avvio del codelab

Scarica l'app di base

L'app di base si trova nella directory material-components-web-codelabs-master/mdc-101/starter. Assicurati di eseguire cd in questa directory prima di iniziare.

Prendi nota del suffisso -master nel nome della directory principale. Se scarichi l'app di base dal pulsante sopra, aggiungi il suffisso -master ogni volta che viene fatto riferimento alla directory principale per il resto di questo codelab.

...o clonala 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: clonare un repository da GitHub

Installa le dipendenze del progetto

Dalla directory di avvio, 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 precompilatore CSS chiamato Sass. Se utilizzi un precompilatore CSS diverso (o nessuno), non preoccuparti. Puoi utilizzare Sass insieme al precompilatore corrente installando l'interfaccia a riga di comando sass CLI 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 file e per pubblicare il nostro sito localmente. La configurazione di webpack per questo progetto è già stata impostata nel file webpack.config.js. Per maggiori dettagli su come è stata configurata, consulta la guida introduttiva.

Esegui l'app di base

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 rimanere in esecuzione mentre modifichiamo il codice.

Verrà avviato webpack-dev-server. Vai all'indirizzo http://localhost:8080/ nel browser per visualizzare la pagina.

Se non sei riuscito a eseguire correttamente npm install o npm start, interrompi e risolvi i problemi dell'ambiente di sviluppo.

Operazione riuscita. Il codice di avvio 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 di avvio, apri index.html con il tuo editor di codice preferito. Dovrebbe contenere quanto segue:

<!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, un tag <link> viene utilizzato 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 vengono 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 MDC Web vengono stilizzati utilizzando le 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 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. Questi verranno utilizzati nel codelab MDC-102 e possono essere ignorati per il momento.

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

3. Aggiungi 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 password. Utilizzeremo il componente Campo di testo MDC, che include funzionalità integrate che visualizzano un'etichetta mobile e attivano un'onda al tocco.

I campi di testo di 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 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 MDC Web vengono pubblicati tramite pacchetti NPM. Per installare il pacchetto per il componente del campo di testo, esegui:

npm install @material/textfield@^6.0.0

Puoi anche installare tutti i componenti MDC Web contemporaneamente eseguendo:

npm install material-components-web@^6.0.0

Scopri di più sull'utilizzo del pacchetto principale MDC Web qui.

Aggiungi 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
• I 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 (--) in questi nomi di selettori provengono 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.

Aggiungi il codice 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;
}

Aggiungi il codice 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'));

Aggiungi 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:

• Aggiungere l'attributo required agli elementi mdc-text-field__input dei campi di testo Nome utente e Password
• Impostare 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 siano simili a questi:

<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/. Ora dovresti vedere 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'onda della linea (la linea del bordo inferiore che si propaga verso l'esterno):

Informazioni sui campi di testo:

Il campo di testo MDC utilizza un elemento HTML nativo <input>, quindi può essere utilizzato con gli elementi nativi <form> 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 assistenza, abbinamento di icone, una variante di stile con contorno e un'area di testo. Dai un'occhiata qui.

4. Aggiungi pulsanti

Successivamente, aggiungeremo due pulsanti alla nostra pagina di accesso: "Annulla" e "Avanti". Utilizzeremo il componente Pulsante MDC, insieme al componente Onda MDC, per completare l'iconico effetto di onda di inchiostro di Material Design.

Installa il pulsante MDC

Per installare il pacchetto per il componente del pulsante, esegui:

npm install @material/button@^6.0.0

Aggiungi 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 del pulsante predefinito. Tuttavia, il pulsante "Avanti" utilizza una variante di stile rialzata, 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 utilizzare con una connettività di rete limitata.

Aggiungi il codice 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 a essi, aggiungi i seguenti stili a login.scss:

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

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

Aggiungi un'onda di inchiostro ai pulsanti

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

Per installare il pacchetto per il componente dell'onda, 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 un'istanza delle onde, aggiungi quanto segue a login.js:

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

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

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

Esistono molte altre varianti di stile del pulsante MDC, come quelle non rialzate e con contorno. 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 è presente alcuna elaborazione lato server. Qualsiasi sito o applicazione di produzione utilizzerebbe HTTP POST (aggiungendo method="POST" all'elemento <form>) per inviare a un endpoint del server e verificare le informazioni di accesso.

5. Riepilogo

Utilizzando il markup HTML di base e solo poche righe di CSS e JavaScript, la libreria dei componenti Material per il web ti ha aiutato a creare una pagina di accesso accattivante conforme alle linee guida di Material Design, 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 in questa directory. Non dimenticare di eseguire prima npm install in questa directory.

Passaggi successivi

Campo di testo, Pulsante e Onda sono tre componenti principali della libreria MDC Web, ma ce ne sono molti altri. Puoi anche esplorare il resto dei componenti in MDC Web.

Puoi passare a MDC-102: struttura e layout di Material Design per scoprire di più sul riquadro di navigazione a scomparsa e sull'elenco di immagini. Grazie per aver provato i componenti Material. Speriamo che questo codelab ti sia piaciuto.

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Molto d'accordo D'accordo Neutro Non d'accordo Molto in disaccordo

Mi piacerebbe continuare a utilizzare i componenti Material in futuro

Molto d'accordo D'accordo Neutro Non d'accordo Molto in disaccordo