Share
Di seguito, nella nostra serie, imparando i dettagli di Material Design Lite (MDL) esamineremo il componente Campi di testo. Un campo di testo può essere utilizzato su qualsiasi cosa da un modulo di ricerca, un modulo di commento o un modulo di contatto, e spesso lo vediamo insieme all'elemento del pulsante.
In effetti, il componente dei campi di testo in MDL è simile al componente del pulsante; è un miglioramento di un elemento html standard per renderlo in linea con l'estetica e le specifiche generali di Material Design. Ancora una volta, prima di iniziare, dovrai includere le librerie MDL, i fogli di stile e il codice JavaScript, nel documento capo.
Iniziamo con alcune nozioni di base.
Per implementare il componente del campo di testo, iniziamo con un vuoto div con MDL-campo di testo e MDL-js-campo di testo classi, avvolto in a modulo elemento. Se hai seguito i nostri post precedenti in questa serie, dovresti già avere familiarità con il modello di denominazione delle classi in MDL. In questo caso, il MDL-campo di testo class applica i miglioramenti visivi dal CSS, mentre il MDL-js-campo di testo applica il comportamento dinamico tramite JavaScript.
All'interno del div, aggiungiamo un ingresso elemento (o forse a textarea) e un'etichetta (che è richiesta) insieme alla classe pertinente necessaria per applicare gli stili.
Questo è tutto ciò che c'è da fare; abbiamo appena creato un campo di input di testo di base con componente del campo di testo MDL!
Vale la pena notare che il MDL-textfield__input classe che abbiamo aggiunto al ingresso l'elemento funzionerà bene solo se applicato a un tipo di input basato su testo come testo, parola d'ordine, e-mail, tel, url, e ricerca. Applicando la classe a un ingresso elemento di tipo colore, Data, o file potrebbe sfornare un risultato molto strano.
Inoltre, il testo dell'etichetta apparirà ugualmente strano se aggiungiamo anche il testo segnaposto:
Il campo di input con il segnapostoPossiamo migliorare l'elemento di input con Etichetta galleggiante. Mentre l'utente si sta concentrando sul campo di input, l'etichetta fluttuerà verso l'alto, fuori dalla direzione del cursore. L'etichetta fluttuante è un modello sempre più comune nella progettazione di moduli, in particolare nel panorama mobile in cui lo spazio limitato è motivo di preoccupazione.
MDL ha reso davvero facile applicare questo modello di design. Tornando al codice HTML precedente, dobbiamo aggiungere il MDL-textfield - floating-label classe al div contenitore.
Bingo! Il nostro campo di inserimento del testo dovrebbe ora essere visivamente più piacevole con l'etichetta mobile:
Il Campo di input espandibile è ancora un altro modello di progettazione comune che possiamo implementare in MDL. Per prima cosa vediamo l'input come un'icona. Dopo essere stato cliccato, si espanderà in un campo di input. Solitamente troviamo questo modello di progettazione applicato agli input di ricerca.
Per rendere il nostro input precedente espandibile, dobbiamo aggiungere il MDL-campo di testo - espandibile classe al div contenitore. Abbiamo anche avvolto il ingresso elemento e l'etichetta con una nuova div con il MDL-textfield__expandable titolare classe allegata. Seguendo questo flusso di lavoro, cambiamo anche il ingresso digita, l'etichetta di testo, nonché gli attributi correlati per specificare "cerca".
Quindi, creiamo un pulsante all'esterno di MDL-textfield__expandable titolare, usare un etichetta elemento che punta all'input.
La sicurezza e la disinfezione dei dati sono fondamentali per le forme. Non vogliamo che i nostri utenti inviino voci con contenuti errati o addirittura dannosi. Pertanto, è necessario valutare la voce utente nel campo di input per conformarsi al tipo di input. Se la ingresso è di e-mail digita, la voce deve essere conforme a un formato email che dovrebbe contenere @ e finisci con a TLD (dominio di primo livello).
Fortunatamente, MDL ci aiuta subito. Non dobbiamo aggiungere markup o classi extra. Impostare l'input con un tipo corretto e trasformerà la sottolineatura in rosso se la formattazione della voce non aderisce al tipo di input.
Un erroreMa possiamo anche impostare il nostro standard di formattazione e fornire anche un elemento visivo che mostri un messaggio di errore. Per esempio:
Messaggio di errore di input MDLPer visualizzare una notifica di errore, dobbiamo prima fornire dei limiti a ciò che gli utenti possono inserire nel ingresso elemento attraverso l'HTML modello attributo. L'attributo pattern richiede un'espressione regolare (Regex) che valuterà e convaliderà l'input dell'utente.
In questo caso, vorrei che l'input del nome utente fosse alfabetico, senza spazi. Quindi, specificheremo il modello attributo con il seguente Regex: [A-Z, a-z] *.
Nota: puoi trovare modelli di Regex comuni in HTML5Pattern, ad esempio per la convalida di email, password, telefoni, codici postali e date.
Successivamente, aggiungiamo il messaggio di errore sotto l'etichetta usando a campata elemento con il MDL-textfield__error. Potrebbe anche essere necessario applicare le regole di stile per regolare la sua posizione e l'allineamento del contenuto.
Siamo tutti pronti! Ora, l'input dovrebbe inserire un messaggio di errore sotto l'input e evidenziarlo con il rosso, se l'utente immette numeri, caratteri speciali o spazi. Provaci:
Come abbiamo appena scoperto, il componente dei campi di testo MDL semplifica l'implementazione di campi di input accattivanti con modelli di progettazione utili come etichetta fluttuante e campo di input espandibile. Abbiamo anche scoperto che è facile aggiungere un messaggio di errore in caso di formattazione errata.
Il prossimo tutorial dovrebbe essere un'entusiasmante puntata di questa serie. Stiamo andando a guardare in una stella nascente tra gli elementi dell'interfaccia utente, il Carta. Rimanete sintonizzati!
Accentsconagua