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 |
I componenti Material per il web (MDC Web) sono indipendenti dal framework e sono creati utilizzando JavaScript standard. In questo modo, MDC Web funziona perfettamente con il tuo processo di sviluppo. Questi componenti possono essere installati in base alle esigenze per apportare miglioramenti agili al design dell'app esistente.
Che cosa creerai
In questo codelab, sostituirai alcuni componenti esistenti in un modulo con quelli forniti da MDC Web:
Componenti MDC Web in questo codelab
- Pulsante
- Seleziona
- Campo di testo
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
Come valuteresti il tuo livello di esperienza con lo sviluppo web?
2. Configurazione dell'ambiente di sviluppo
Scarica l'app di avvio del codelab
L'app di base si trova nella directory material-components-web-codelabs-master/mdc-111/starter. Assicurati di eseguire cd in questa directory prima di iniziare.
...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-111/starter
Installa le dipendenze del progetto
Dalla directory di avvio (material-components-web-codelabs/mdc-111/starter), esegui:
npm install
Vedrai molte attività e, alla fine, il terminale dovrebbe mostrare un'installazione riuscita:
Esegui l'app di base
Nella directory di avvio, esegui:
npm start
Verrà avviato webpack-dev-server. Vai all'indirizzo 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
Installa il pulsante MDC
Premi Ctrl+C per arrestare 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";
Aggiorna 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'effetto di increspatura
I pulsanti MDC possono essere utilizzati senza JavaScript. Tuttavia, l'aggiunta di un effetto di increspatura interattivo al pulsante crea un'esperienza utente più ricca.
Premi Ctrl+C per arrestare il server di sviluppo. Quindi, 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 di increspatura sul pulsante, aggiungi quanto segue alla fine di app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Importa il carattere Roboto
Per impostazione predefinita, Material Design utilizza Roboto per i caratteri 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 e dovresti vedere qualcosa di simile a questo:
Ora il pulsante mostra un leggero effetto di increspatura come feedback visivo quando viene premuto.
4. Aggiorna l'elemento di selezione
Il componente di selezione MDC racchiude un elemento HTML nativo <select>. Utilizzalo ovunque utilizzeresti normalmente un elemento <select>. Aggiorniamo il campo "Stato".
Installa il modulo nodo MDC
Premi Ctrl+C per arrestare il server di sviluppo. Quindi, 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";
Aggiorna 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 del menu a discesa del componente di selezione MDC:
<i class="mdc-select__dropdown-icon"></i>
Subito 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 immediatamente 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 l'aspetto seguente:
<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 codice JavaScript
Aggiungi la seguente istruzione di importazione all'inizio di app.js:
import {MDCSelect} from '@material/select';
Per creare un'istanza della selezione, aggiungi quanto segue alla fine di app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Ricarica la pagina, che ora dovrebbe avere l'aspetto seguente:
Il componente di selezione MDC 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 di Material Design offrono notevoli miglioramenti 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 discreto quando l'utente interagisce con loro.
Installa il modulo nodo MDC
Premi Ctrl+C per arrestare il server di sviluppo. Quindi, esegui:
npm install @material/textfield npm start
Aggiungi il CSS
Aggiungi quanto segue a _theme.scss, subito dopo l'importazione della selezione:
@import "@material/textfield/mdc-text-field";
Aggiorna 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>
Quindi, sostituisci la classe crane-label con mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Quindi, aggiungi il seguente markup immediatamente dopo l'etichetta:
<div class="mdc-line-ripple"></div>
Infine, racchiudi tutti e tre gli elementi con quanto segue:
<div class="mdc-text-field">
...
</div>
Il markup risultante dovrebbe avere l'aspetto seguente:
<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 <input> elementi nella pagina.
Il markup per i campi "Indirizzo", "Città" e "CAP" dovrebbe avere l'aspetto 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 gli stili .crane-label e .crane-input da _theme.scss, che non vengono più utilizzati.
Importa il codice JavaScript
Aggiungi la seguente istruzione di importazione all'inizio di app.js:
import {MDCTextField} from '@material/textfield';
Per creare un'istanza dei campi di testo, aggiungi quanto segue alla fine di app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Ricarica la pagina, che ora dovrebbe avere l'aspetto seguente:
I campi di testo sono stati tutti aggiornati per utilizzare i temi di Material.
6. Riepilogo
Hai sostituito alcuni componenti comuni (campi di testo, selezione e pulsante) senza eseguire una riprogettazione completa dell'app. Ottimo lavoro.
Altri componenti che possono fare una grande differenza includono la barra delle app in alto e il riquadro di navigazione a scomparsa.
Passaggi successivi
Puoi esplorare altri componenti in MDC Web visitando il catalogo MDC Web.
Se ti interessa utilizzare MDC Web con un framework specifico, consulta MDC-112: integrazione di MDC con i framework web.