1. Introduzione
Material Components (MDC) consente agli sviluppatori di 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 campione (da scaricare nel passaggio successivo)
- Conoscenza di base di HTML, CSS e JavaScript
Come giudichi 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.
...o clonarlo da GitHub
Per clonare questo codelab da GitHub, esegui questi comandi:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
Installa 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
Verrà avviato webpack-dev-server. Visita il sito http://localhost:8080/ nel browser per visualizzare la pagina.
Operazione riuscita. Dovresti visualizzare il modulo dell'indirizzo di spedizione dell'app:
3. Aggiorna il pulsante
Pulsante Installa MDC
Premi Ctrl+C per terminare il server di sviluppo. Quindi, installa il pacchetto NPM del pulsante MDC e riavvia il server:
npm install @material/button npm start
Importa 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'onda interattiva al pulsante crea un'esperienza utente più ricca.
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'eco sul pulsante, aggiungi quanto segue in fondo a app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Importa 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 select
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 terminare il server di sviluppo. Dopodiché, esegui:
npm install @material/select npm start
Importa il CSS
Aggiungi il seguente codice 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>
Subito sopra il tag <select>, aggiungi il seguente markup per la freccia 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">
Quindi aggiungi 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 per la selezione, aggiungi quanto segue in fondo a 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 facili da identificare all'interno di contenuti complessi e per mostrare un leggero feedback visivo durante l'interazione dell'utente.
Installa il modulo del nodo MDC
Premi Ctrl+C per terminare il server di sviluppo. Dopodiché, esegui:
npm install @material/textfield npm start
Aggiungere 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 essere simile al seguente:
<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 da _theme.scss gli stili .crane-label e .crane-input, che non vengono più utilizzati.
Importa il file 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 materiali.
6. Riepilogo
Hai sostituito alcuni componenti comuni (campi di testo, selezione e pulsante) senza riprogettare completamente l'app. Ottimo!
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.