1. Introduzione
Material Components (MDC) aiutano gli sviluppatori a 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 |
Material Components per il web (MDC Web) è indipendente dal framework e viene creato utilizzando codice JavaScript standard. In questo modo MDC Web interagisce perfettamente con il tuo processo di sviluppo. Questi componenti possono essere installati in base alle esigenze per apportare miglioramenti agili al design della tua app esistente.
Cosa creerai
In questo codelab, sostituirai alcuni componenti esistenti in un modulo con quelli forniti da MDC Web:
Componenti web MDC in questo codelab
- Pulsante
- Seleziona
- Campo di testo
Che cosa ti serve
- Una versione recente di Node.js (integrata in 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?
2. Configurazione dell'ambiente di sviluppo
Scarica l'app codelab iniziale
L'app iniziale si trova nella directory material-components-web-codelabs-master/mdc-111/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-111/starter
Installare le dipendenze del progetto
Dalla directory iniziale (material-components-web-codelabs/mdc-111/starter), esegui:
npm install
Vedrai molta attività e, alla fine, il tuo terminale dovrebbe mostrare un'installazione eseguita correttamente:
Esegui l'app iniziale
Nella directory iniziale, esegui:
npm start
Inizierà webpack-dev-server. Apri il browser all'indirizzo http://localhost:8080/ per visualizzare la pagina.
Operazione riuscita. Dovresti vedere il modulo dell'indirizzo di spedizione dell'app:
3. Aggiorna il pulsante
Pulsante Installa MDC
Premi Ctrl+C per terminare il server di sviluppo. Poi, installa il pacchetto NPM del pulsante MDC e riavvia il server:
npm install @material/button npm start
Importare il CSS
Nella parte superiore di _theme.scss, elimina il blocco .crane-button { ... } e aggiungi quanto segue al suo posto:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Aggiornare il markup
In index.html, rimuovi la classe crane-button dall'elemento <button>, aggiungi le classi mdc-button e mdc-button--raised e nidifica l'etichetta all'interno di un elemento <span> con la classe mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Aggiungi l'eco
I pulsanti MDC possono essere utilizzati senza JavaScript. Tuttavia, l'aggiunta di un'eco interattiva al pulsante crea un'esperienza utente più completa.
Premi Ctrl+C per terminare il server di sviluppo. Dopodiché, esegui:
npm install @material/ripple npm start
Aggiungi la seguente istruzione di importazione all'inizio di app.js:
import {MDCRipple} from '@material/ripple';
Per creare un'istanza dell'effetto ripple sul pulsante, aggiungi quanto segue alla parte inferiore di app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Importare il carattere Roboto
Per impostazione predefinita, Material Design utilizza Roboto per i caratteri tipografici dei componenti.
In index.html, importa il carattere web Roboto aggiungendo quanto segue all'elemento <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Ricarica la pagina. Il risultato dovrebbe essere simile al seguente:
Il pulsante ora mostra un sottile effetto a onde sotto forma di feedback visivo quando viene premuto.
4. Aggiorna l'elemento di selezione
Il componente MDC Select aggrega un elemento HTML <select> nativo. Usalo ovunque useresti normalmente un <select>. Aggiorniamo il campo "Stato".
Installa il modulo del nodo MDC
Premi Ctrl+C per arrestare il server di sviluppo. Dopodiché, esegui:
npm install @material/select npm start
Importa il CSS
Aggiungi quanto segue a _theme.scss, subito dopo l'importazione del pulsante:
@import "@material/select/mdc-select";
Aggiornare il markup
Individua l'elemento <select> in index.html. Sostituisci la classe crane-input con mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Proprio sopra il tag <select>, aggiungi il seguente markup per la freccia del menu a discesa del componente MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Appena sotto il tag di chiusura </select>, sostituisci la classe crane-label con mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Aggiungi poi il seguente markup subito dopo l'etichetta:
<div class="mdc-line-ripple"></div>
Infine, aggiungi i seguenti tag intorno all'elemento <select> (ma all'interno dell'elemento crane-field):
<div class="mdc-select">
...
</div>
Il markup risultante dovrebbe avere il seguente aspetto:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Importa il file JS
Aggiungi la seguente istruzione di importazione all'inizio di app.js:
import {MDCSelect} from '@material/select';
Per creare un'istanza del selettore, aggiungi quanto segue alla fine di app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Ricarica la pagina, che ora dovrebbe avere il seguente aspetto:
Il componente MDC Select presenta un elenco di opzioni per l'utente in un formato familiare, ma con uno stile moderno.
5. Aggiorna i campi di testo
I campi di testo Material Design presentano notevoli vantaggi in termini di usabilità rispetto ai semplici elementi <input>. Sono progettati per essere facilmente identificabili all'interno di contenuti complessi e mostrano un feedback visivo sottile quando l'utente interagisce con loro.
Installa il modulo MDC Node
Premi Ctrl+C per arrestare il server di sviluppo. Dopodiché, esegui:
npm install @material/textfield npm start
Aggiungi il CSS
Aggiungi quanto segue a _theme.scss, subito dopo l'importazione selezionata:
@import "@material/textfield/mdc-text-field";
Aggiornare il markup
In index.html, individua l'elemento <input> per il campo "Nome". Sostituisci la classe crane-input con mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Poi, sostituisci la classe crane-label con mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Quindi aggiungi il seguente markup subito dopo l'etichetta:
<div class="mdc-line-ripple"></div>
Infine, aggrega tutti e tre gli elementi con quanto segue:
<div class="mdc-text-field">
...
</div>
Il markup risultante dovrebbe avere il seguente aspetto:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Ripeti la stessa procedura per tutti gli altri elementi <input> della pagina.
Il markup per i campi "Indirizzo", "Città" e "Codice postale" dovrebbe avere il seguente aspetto:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Ora puoi rimuovere gli stili .crane-label e .crane-input da _theme.scss, poiché non sono più utilizzati.
Importa il codice JS
Aggiungi la seguente istruzione di importazione all'inizio di app.js:
import {MDCTextField} from '@material/textfield';
Per creare un'istanza per i campi di testo, aggiungi quanto segue in fondo a app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Ricarica la pagina, che ora dovrebbe avere il seguente aspetto:
Tutti i campi di testo sono stati aggiornati per utilizzare i temi Material.
6. Riepilogo
Hai sostituito alcuni componenti comuni (campi di testo, selezione e pulsanti) senza eseguire un nuovo design completo dell'app. Ottimo lavoro.
Anche altri componenti che possono fare una grande differenza includono la barra superiore delle app e il riquadro di navigazione a scomparsa.
Passaggi successivi
Puoi esaminare altri componenti di MDC Web visitando il catalogo web di MDC.
Se vuoi utilizzare MDC Web con un framework specifico, vai a MDC-112: Integrating MDC with Web Frameworks.