Share
I pulsanti sono parte integrante di qualsiasi sito web funzionale (più i designer li adorano!) Le azioni dell'utente sul Web, in generale, iniziano e terminano facendo clic su un pulsante. Ad esempio, in Google Mail creiamo una nuova email facendo clic sul Comporre pulsante. Probabilmente faremo clic anche su altri pulsanti lungo il percorso per personalizzare l'e-mail. E infine, facciamo clic sul Inviare pulsante per inviare l'e-mail. In questa parte della nostra serie Learning Material Design Lite (MDL), esamineremo ilpulsanti componente.
Il componente Buttons in MDL è essenzialmente un miglioramento visivo del , o un elemento per aderire all'estetica del Material Design. In base alle specifiche, ci sono quattro tipi di pulsante
Analizzeremo come implementare ciascuno di questi e quando quale pulsante funziona meglio.
Come promemoria, assicurati di avere i fogli di stile MDL e il codice JavaScript impostati all'interno del documento capo. È possibile personalizzare la combinazione di colori che verrà applicata ai componenti utilizzando il generatore di temi MDL.
Una volta impostati, possiamo implementare ilComponente di pulsanti, a partire da piatto genere.
La creazione di un pulsante MDL è abbastanza semplice. Possiamo creare un pulsante con a pulsante elemento, un ingresso elemento con Sottoscrivi tipo, o un tag di ancoraggio.
Sottoscrivi
Aggiungi il MDL-button class a questi elementi per applicare gli stili del pulsante MDL.
Nella demo qui sotto, abbiamo creato un piatto pulsante con il colore predefinito impostato su nero.
Il colore del testo del pulsante è personalizzabile includendo uno dei seguenti modificatoriclassi.
Accentsconagua
MDL-button - colorato Aggiungi questa classe per applicare il colore primario al testo del pulsante.MDL-button - accento In alternativa, aggiungi questa classe per applicare il colore dell'accento.Facendo riferimento al nome del foglio di stile principale (material.teal-red.min.css), il nostro colore primario è "verde acqua", mentre "rosso" verrà applicato come accento o come colore secondario (inserisci il testo nell'input di posta elettronica in basso per vedere quei colori hanno effetto).
Il piatto pulsante è il tipo di pulsante più semplice in MDL. Funzionerà meglio in una situazione in cui è prevista un'azione intuitiva, ad esempio in una finestra di dialogo popup, in un componente della scheda o in un modulo di accesso o registrazione.
A causa del suo aspetto, tuttavia, l'uso di a piatto il pulsante all'interno del corpo del testo non è raccomandato. Il piatto il pulsante appare come un normale testo, come puoi vedere sopra. E dal momento che non mostra esplicitamente le caratteristiche dei pulsanti comuni a prima vista, il pulsante non trasmette la convenienza che la maggior parte degli utenti riconoscerà come un pulsante cliccabile.
È un pulsante?Quando il piatto il pulsante non è appropriato, prendere in considerazione l'utilizzo di a sollevato tipo di pulsante.
Il sollevato pulsante mostra le caratteristiche tipiche di un pulsante; è quadrata con un'ombra esterna per dare l'effetto sollevato. Per crearne uno, iniziamo con a pulsante elemento con il MDL-button classe allegata.
Quindi aggiungere il MDL-Pulsante - sollevato classe per l'elemento. Culo prima, il sollevato pulsante può anche essere personalizzato con l'aggiunta del MDL-button - colorato o MDL-button - accento classe.
Qui abbiamo sollevato pulsanti con impostazione predefinita, primaria e il colore dell'accento impostato come sfondo del pulsante.
Il sollevato il pulsante è prominente, il che lo rende appropriato quando l'attenzione degli utenti è prioritaria. Può essere applicato, ad esempio, a un pulsante di invito all'azione nella sezione dell'eroe, a un pulsante di invio in un modulo di iscrizione o a un pulsante "Acquista ora" in una pagina del prodotto.
Nota: tieni presente la gerarchia quando applichi a sollevato pulsante. L'uso di un pulsante in rilievo in un livello di contenuto con ombre esterne, come una finestra di dialogo popup, può rendere il contenuto eccessivamente occupato con elementi che combattono per l'attenzione.
Il Floating Action Button (FAB) è stato riconosciuto come l'elemento distintivo di Material Design. Il FAB è un pulsante circolare con un'icona mobile su una pagina. Lo scopo di un FAB è simile al pulsante di invito all'azione; enfatizza un'azione che gli utenti presumibilmente eseguiranno di più. Di solito è presente con un colore vivido che lo rende più prominente tra il resto degli elementi dell'interfaccia utente in quella pagina.
Trova il FABAncora una volta, iniziamo un pulsante di azione mobile con un vuoto pulsante elemento con il MDL-button classe. Questa volta, al posto del testo, includiamo un include un'icona all'interno del pulsante. Fare riferimento alle linee guida dell'icona di Material Design per scegliere il nome dell'icona da visualizzare.
Per trasformare il pulsante in un FAB, aggiungiamo il MDL-button - fab classe, inoltre con il MDL-button - colorato per modificare il colore di sfondo.
Come puoi vedere qui sotto, il pulsante FAB prende il accento colore quando impostato su un pulsante colorato, al contrario di primario colore, come abbiamo visto con il piatto e sollevato pulsanti.
MDL applica il colore primario alla maggior parte dei componenti "colorati", come la navigazione, le schede, i campi di testo, i cursori e le caselle di controllo, che lo rende completamente dominante. Il FAB dovrebbe essere più prominente tra il resto dell'interfaccia utente, quindi assume il colore dell'accento per impostazione predefinita.
In ogni caso, quando il colore primario risulta essere più adatto, è possibile aggiungere il MDL-button - primario classe invece.
Eccolo con il colore primario:
A differenza di FAB, il icona non ha la forma di un cerchio; appare semplicemente come un'icona. Un pulsante icona è utile quando lo spazio è limitato, oppure è sufficiente rappresentare lo scopo del pulsante come gli utenti sono abituati all'applicazione. Prendi la barra degli strumenti di Google Documenti come esempio:
L'utilizzo di un pulsante testuale per una barra degli strumenti in questo caso sarebbe inimmaginabile.
Il icona pulsante è formato attraverso il MDL-button e MDL-button - icona combinazione di classe:
Questo esempio mostra un'icona che descrive la funzionalità di upload o di backup:
Inoltre, questi pulsanti possono essere migliorati con l'effetto a catena. L'effetto a catena è un altro dei segni visivi di Material Design e fornisce un riscontro visivo quando si fa clic sul pulsante. L'effetto inizia dalla coordinata quando si fa clic, replicando come l'effetto funziona nella vita reale.
Questo miglioramento arriva attraverso due classi: MDL-js-button e MDL-js-ripple-effetto che può essere applicato a qualsiasi tipo di pulsante MDL.
Aggiungi queste due classi al pulsante:
e l'effetto a catena dovrebbe ora essere applicato:
In alcuni casi, ad esempio quando un campo di testo richiesto è ancora vuoto, o un'opzione particolare deve ancora essere selezionata, il pulsante azionabile potrebbe essere disattivato. Per disabilitare i pulsanti MDL, aggiungi l'attributo booleano HTML Disabilitato all'elemento button:
Il pulsante dovrebbe ora non rispondere all'interazione dell'utente (anche l'effetto ripple sarà disabilitato). Aggiungere le classi di modifica del colore MDL-button - colorato o MDL-button - accento, non avrà alcun effetto sui pulsanti disabilitati.
Il Disabilitato l'attributo, sebbene non valido HTML, è applicabile anche ai pulsanti creati con un tag di ancoraggio.
I pulsanti sono abbastanza semplici da implementare. Possiamo creare un pulsante ben disegnato, con un'animazione con effetto a linee morbide, con solo un paio di classi. Personalmente, spero che il componente sarà ulteriormente migliorato prendendo spunto dal componente Button Bootstrap, forse includendo la variante di Button Groups.
Nella prossima puntata di questa serie, esamineremo il componente Campi di testo, che abbiamo già incontrato alcune volte finora.
Fino alla prossima volta!
