MDC-101 Web: nozioni di base sui componenti materiali (MDC)

Gli elementi MDC (Material Components) aiutano gli sviluppatori a implementare Material Design. Creata da un team di ingegneri e designer UX di Google, MDC offre decine di componenti dell'interfaccia utente belli e funzionali ed è disponibile per Android, iOS, Web e Flutter. material.io/develop

Cosa sono Material Design e componenti materiali per il Web?

Material Design è un sistema per creare prodotti digitali accattivanti e bellissimi. Combinando stile, branding, interazione e movimento in base a un insieme coerente di principi e componenti, i team di prodotto possono realizzare le loro maggiori potenzialità di progettazione.

Per desktop e Web mobile, Material Components Web (MDC Web) unisce il design e la progettazione con una raccolta di componenti per creare coerenza tra app e siti web. I componenti MDC Web risiedono nei propri moduli di nodi, quindi, man mano che il sistema di Material Design si evolve, questi componenti possono essere facilmente aggiornati per garantire un'implementazione pixel perfetta e l'ottemperanza agli 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 imparerai a realizzare

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

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

• Due campi di testo, uno per l'inserimento di un nome utente e l'altro per l'inserimento di una password
• Due pulsanti, uno per "Annulla", uno per "Avanti".
• Il nome del sito web (santo)
• Immagine del logo di Santuario

I codelab correlati sono disponibili all'indirizzo:

• MDC-102: Struttura e layout di Material Design
• MDC-103: tema dei materiali con colore, forma, altitudine e tipo

Entro la fine del MDC 103, creerai un sito web simile al seguente:

Componenti web MDC in questo codelab

• Campo di testo
• Pulsante
• Ondulare

In questo codelab, utilizzerai i componenti predefiniti forniti da MDC Web. Scoprirai come personalizzarli in MDC-103: Material Design Theming con colore, forma, altitudine e tipo.

Che cosa ti serve

• Una versione recente di Node.js (integrata a npm, un gestore di pacchetti JavaScript).
• Codice di esempio (da scaricare nel passaggio successivo)
• Conoscenza di base di HTML, CSS e JavaScript

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

Principiante Intermedio Esperto

Scarica l'app del codelab per iniziare

Scarica l'app iniziale

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

Nota il suffisso -master nel nome della directory principale. Se stai scaricando l'app iniziale dal pulsante in alto, aggiungi il suffisso -master ogni volta che la directory radice viene indicata per il resto di questo codelab.

...o clonarlo da GitHub

Per clonare questo codelab da GitHub, esegui i comandi seguenti:

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

Installare le dipendenze del progetto

Dalla directory iniziale, esegui:

npm install

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

Se non è presente, esegui npm audit fix.

MDC Web utilizza un preprocessore CSS chiamato Sass. Se utilizzi un altro preprocessore CSS (o non lo utilizzi affatto), non c'è problema. Puoi utilizzare Sass insieme al tuo preprocessore attuale 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 catena di sviluppo.

Affinché il nostro codice funzioni su browser meno recenti come IE 11, utilizziamo un transpiler chiamato Babel per eseguire il transpile della sintassi JavaScript di MDC Web ES2015 fino alla sintassi JavaScript ES5.

Useremo il webpack per raggruppare i nostri file e pubblicare localmente il nostro sito. La configurazione del webpack per questo progetto è già stata impostata 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 una finestra del terminale separata, in modo che il server locale possa essere mantenuto in esecuzione mentre modifichiamo il codice.

webpack-dev-server inizierà. Vai sul sito http://localhost:8080/ per vedere la pagina.

Se non è stato possibile eseguire correttamente npm install o npm start, interrompi e risolvi i problemi relativi all'ambiente per sviluppatori.

Operazione riuscita. Il codice di avvio della pagina di accesso di Santuario dovrebbe essere in esecuzione nel browser. Dovresti vedere il nome "Shrine" e il logo del Santuario immediatamente 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>

In questo caso, un tag <link> viene utilizzato per caricare il file bundle-login.css generato da webpack, mentre un tag <script> include il file bundle-login.js. Inoltre, includiamo normalize.css per il rendering coerente su più browser, nonché il carattere robot di Google Fonts.

Stili personalizzati in login.scss

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

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

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

Apri login.scss per visualizzare 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 per ora possono essere ignorati.

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

Per iniziare, aggiungeremo due campi di testo alla nostra pagina di accesso, dove gli utenti potranno inserire nome utente e password. Useremo il componente Campo di testo MDC, che include funzionalità integrata che mostra un'etichetta mobile e attiva un'inclinazione touch.

I campi di testo di Material Design sono stati notevolmente migliorati per migliorare la flessibilità del brand, grazie a miglioramenti supportati da un'ampia esperienza utente (UX) che migliorano l'usabilità e la grafica.

Per ulteriori informazioni sui campi di testo migliorati, consulta l'articolo nelle Linee guida sui materiali.

Installa il campo di testo MDC

I componenti Web MDC vengono pubblicati tramite i pacchetti NPM. Per installare il pacchetto per il componente del campo di testo, esegui questo comando:

npm install @material/textfield

Puoi anche installare tutti i componenti Web MDC contemporaneamente eseguendo questo comando:

npm install material-components-web

Scopri ulteriori informazioni sull'utilizzo del pacchetto web MDC principale qui.

Aggiungere il codice HTML

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

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username">
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

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

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

Nota: i trattini bassi (__) e il trattino doppio (--) nei nomi dei selettori sono provenienti dal motivo 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: block;
  width: 300px;
  margin: 20px auto;
}

Aggiungere 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'));

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 del modulo 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 <div class="mdc-text-field"> in modo che siano simili al seguente:

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

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

Fai clic sui campi di testo per verificare l'animazione dell'etichetta mobile e l'animazione dell'ondulazione della linea (la linea del bordo inferiore che si espande verso l'esterno):

Informazioni sui campi di testo:

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

• Il campo di testo MDC riflette automaticamente gli stati al passaggio del mouse e allo stato attivo.
• Il campo di testo MDC include molte funzionalità e varianti di stile, come testo di supporto, accoppiamento dell'icona, una variante di stile con contorno e un'area di testo. Dai un'occhiata qui.

Quindi, aggiungeremo due pulsanti alla nostra pagina di accesso: "Annulla" e "Avanti." Useremo il componente Pulsante MDC, insieme al componente MDC Ripple, per completare l'iconico effetto ondulato Material Design.

Pulsante MDC di installazione

Per installare il pacchetto per il componente Pulsante, esegui questo comando:

npm install @material/button

Aggiungere il codice HTML

In index.html, aggiungi quanto segue sotto il tag di chiusura dell'elemento <div class="mdc-text-field 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", stiamo utilizzando lo stile predefinito dei pulsanti. Tuttavia, il pulsante "Avanti" utilizza una variante di stile alzata, che è indicata dalla classe mdc-button--raised.

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

Nota: il componente Pulsante MDC su MDC Web non richiede JavaScript e, di conseguenza, lo rende più leggero e veloce da utilizzare 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, 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'inclinazione al pulsante

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

Per installare il pacchetto per il componente ripple, esegui:

npm install @material/ripple

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

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

Per creare un'istanza delle increspature, aggiungi quanto segue a login.js:

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

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

Ecco fatto. Aggiorna la pagina. Quando fai clic su ciascun pulsante, viene visualizzata un'onciatura.

Esistono molte altre varianti dello stile del pulsante MDC, ad esempio non elevate e contornate. Dai un'occhiata qui.

Compila i campi di testo con valori validi e premi il pulsante "CONTINUA". Obiettivo raggiunto. Continuerai a lavorare su questa pagina in MDC-102.

Nota: per questo esercizio, il modulo viene inviato tramite HTTP GET e non è prevista 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.

Utilizzando il markup HTML di base e solo poche righe di CSS e JavaScript, i componenti Material Webs per la libreria web ti hanno aiutato a creare una bellissima pagina di accesso conforme alle linee guida di Material Design e hanno 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 con la pagina di tale directory. Non dimenticare di eseguire npm install in quella directory.

Passaggi successivi

I campi Testo, Pulsante e Ripple sono tre componenti fondamentali della libreria web MDC, ma ce ne sono molti altri! Puoi anche esplorare gli altri componenti in MDC Web.

Per scoprire di più sul riquadro di navigazione a scomparsa e sull'elenco di immagini, puoi passare a MDC-102: Struttura e layout di Material Design. Grazie per aver provato i componenti materiali. Ci auguriamo che questo codelab sia stato di tuo gradimento.

Sono riuscito a completare questo codelab con un tempo e con un impegno ragionevoli

Totalmente d'accordo D'accordo Neutro In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare i componenti materiali in futuro

Totalmente d'accordo Totalmente d'accordo Neutro Totalmente in disaccordo Totalmente in disaccordo