Share
În continuare, în cadrul seriei noastre de învățare a insulelor și ieșirilor din Material Design Lite (MDL), vom examina componenta Fields. Un câmp de text ar putea fi folosit pentru orice element dintr-un formular de căutare, un formular de comentariu sau un formular de contact și adesea îl vedem în legătură cu elementul de buton.
De fapt, componenta câmpurilor de text din MDL este similară cu componenta butonului; este o îmbunătățire a unui element html standard pentru ao aduce în linie cu designul general al materialului estetic și specificații. Încă o dată, înainte de a începe, va trebui să includeți bibliotecile MDL - foile de stil și JavaScript - în documentul dvs. cap.
Să începem cu câteva lucruri de bază.
Pentru a implementa componenta de câmp text, începem cu un gol div cu mdl-textfield și mdl-js-textfield clase, înfășurat într - un formă element. Dacă ați urmat posturile noastre anterioare din această serie, trebuie să fiți deja familiarizați cu modelul de denumire a clasei din MDL. În acest caz, mdl-textfield clasa aplică îmbunătățirile vizuale din CSS, în timp ce mdl-js-textfield aplică comportamentul dinamic prin JavaScript.
În cadrul div, adăugăm un intrare element (sau poate a textarea) și o etichetă (care este necesară) împreună cu clasa relevantă necesară pentru aplicarea stilurilor.
Cam despre asta e; tocmai am construit un câmp de introducere a textului de bază cu componentă de câmp text MDL!
Este demn de remarcat faptul că mdl-textfield__input clasa pe care am adăugat-o la intrare elementul va funcționa bine numai când este aplicat unui tip de introducere bazat pe text, cum ar fi text, parola, e-mail, tel, URL-ul, și căutare. Aplicarea clasei la un curs intrare element de tip culoare, Data, sau fişier ar putea genera un rezultat foarte ciudat.
În plus, textul etichetei va apărea la fel de ciudat dacă adăugăm și text de înlocuire:
Câmpul de introducere cu substituentPutem îmbunătăți elementul de intrare cu Etichetă plutitoare. Pe măsură ce utilizatorul se concentrează pe câmpul de intrare, eticheta va pluti în sus, afară din calea cursorului. Eticheta plutitoare este un model din ce în ce mai obișnuit în proiectarea formelor, în special în peisajul mobil în care spațiul limitat este îngrijorător.
MDL a făcut foarte ușor acest model de design. Înapoi la codul HTML anterior, trebuie să adăugăm mdl-textfield - plutitor eticheta clasa la div recipient.
Bingo! Câmpul de introducere a textului ar trebui acum să fie mai plăcut vizual cu eticheta plutitoare:
Câmp de intrare extensibil este un alt model comun de design pe care îl putem implementa în MDL. Mai întâi vedem intrarea ca pictogramă. După ce se face clic, se va extinde într-un câmp de introducere. De obicei, acest tip de design se aplică pentru căutarea intrărilor.
Pentru a face ca intrarea noastră anterioară să fie extinsă, trebuie să adăugăm mdl-textfield - expandabil clasa la div container. De asemenea, înfășurăm intrare element și eticheta cu un nou div cu mdl-textfield__expandable-titular clasă anexată. În urma acestui flux de lucru, schimbăm de asemenea intrare tip, eticheta de text, precum și atributele aferente pentru a specifica "căutare".
Apoi, vom crea un buton în afara mdl-textfield__expandable-titular, folosind un eticheta element care indică intrarea.
Datele de securitate și de dezintoxicare sunt esențiale în ceea ce privește formele. Nu vrem ca utilizatorii noștri să trimită înregistrări cu conținut incorect sau chiar rău intenționat. Prin urmare, trebuie să evaluăm intrarea utilizatorului în câmpul de introducere pentru a se conforma tipului de intrare. În cazul în care intrare este de e-mail tip, intrarea trebuie să respecte un format de e-mail - ar trebui să conțină @ și se termină cu o TLD (domeniu de nivel superior).
Din fericire, MDL ne ajută să ieșim din cutie. Nu trebuie să adăugăm marcaj suplimentar sau clase. Setați intrarea cu un tip corespunzător și va roti subliniați roșu dacă formatul de intrare nu aderă la tipul de intrare.
O eroareDar putem, de asemenea, să setăm propriul standard de formatare și să furnizăm, de asemenea, un element vizual care afișează un mesaj de eroare. De exemplu:
MDL mesaj de eroare de intrarePentru a afișa o notificare de eroare, trebuie să furnizăm mai întâi limite la ce pot intra utilizatorii în intrare element prin HTML model atribut. Atributul de model are o Expresie Regulară (Regex) care va evalua și valida intrarea utilizatorului.
În acest caz, aș dori ca intrarea pentru numele de utilizator să fie alfabetică, fără spații. Astfel, vom specifica model atribuiți cu următorul Regex: [A-Z, a-z] *.
Notă: puteți găsi modele comune Regex în HTML5Pattern, cum ar fi unul pentru validarea e-mailului, parolei, telefoanelor, codurilor poștale și datelor.
Apoi, adăugăm mesajul de eroare de sub etichetă folosind a deschidere element cu mdl-textfield__error. De asemenea, este posibil să aplicați reguli de stil pentru a ajusta poziția și alinierea conținutului.
Suntem cu toții pregătiți! Acum, intrarea ar trebui să arunce un mesaj de eroare sub intrare și să o evidențieze cu roșu, dacă utilizatorul introduce numere, caractere speciale sau spații. Încearcă:
După cum tocmai am descoperit, componenta câmpurilor text MDL ne face ușor să implementăm câmpuri de intrare angajate cu modele de design utile, cum ar fi eticheta plutitoare și câmpul de intrare extensibil. De asemenea, am descoperit că este ușor să adăugați un mesaj de eroare în cazul formatării incorecte.
Următorul tutorial ar trebui să fie o tranșă interesantă din această serie. Vom analiza o stea în ascensiune printre elementele UI Card. Rămâneți aproape!
Accentsconagua