Creați formulare cu Material Design

Unul dintre cele mai fundamentale aspecte în orice aplicație sunt formularele, deoarece acestea ne permit să captăm informațiile utilizatorului cu privire la modelul de afaceri pe care îl gestionează aplicația noastră.

Proiectarea materialelor Prin combinarea celor mai bune practici de design clasic și implementarea efectelor originale și inovatoare, acestea ne permit să creăm forme care nu numai că arată bine, dar oferă și aplicației noastre o funcționalitate suplimentară.

Să vedem atunci cum să creăm o formă de bază folosind principiile Proiectarea materialelor.

CerințeÎnainte de a începe acest tutorial, vă recomandăm să faceți o plimbare prin introducerea Material Design aici. Ne vom baza pe cadrul numit Materialize și este important să înțelegem cum funcționează containerul aplicației noastre.

Containerul Materialize

Containerul de Materializa funcționează la fel BootstrapÎn cazul în care am atins deja acest cadru, nu vom avea probleme să înțelegem cum funcționează, dar pentru cei care nu îl cunosc, este în principal un container de 12 coloane, în care putem spune elementelor noastre câte coloane poate acoperi.

Are o ierarhie destul de similară, are o clasă de containere, urmată de o clasă de rând și în cele din urmă clasele aplicabile coloanelor, să vedem cum ar arăta o structură a unui rând complet, urmată de un rând care ar conține două elemente.

Acesta este un div cu 12 coloaneAcesta este un div cu 6 coloaneAcesta este un div cu 6 coloane

Modul în care îl vedem este destul de simplu, trebuie doar să fim clari că avem douăsprezece coloane cu care să lucrăm și, astfel, să ne păstrăm conținutul organizat și prezentat vizual mai bine. Văzând deja cum funcționează containerul, să trecem la construcția formei noastre de bază.

Crearea formularului

Să creăm un HTML cu structura noastră implicită și primul lucru pe care îl vom face este să includem bibliotecile ambelor CSS ca JavaScript de Materializa și în acest fel aplicați funcționalitatea pe care o dorim la formularul nostru.

Este important să includem jQuery în ultima sa versiune pentru funcționarea corectă a cadrului, în plus, trebuie să includem o linie specială care să ne permită să folosim pictogramele sale.

Odată ce am inclus bibliotecile, rămâne construcția formularului nostru, majoritatea elementelor vor avea o structură similară cu următoarea, unde vom avea clasa rând, urmat de clasă varză și numărul de coloane pe care elementul le va ocupa.

NumeNume

Materializa De asemenea, ne permite să validăm câmpurile, în cazul e-mailului prin indicarea tipului în care putem atribui mesaje în cazul în care informațiile sunt valabile sau nu, să vedem:

 E-mail

De asemenea, putem include faimoasele icoane, o caracteristică preluată din designul plat, care oferă aplicației noastre un nivel mai mare de utilizare. Pentru aceasta vom folosi eticheta cu clasa specifică:

 e-mail

În cele din urmă, nicio formă de bază nu este completă fără celebrul textarea, casete de text care ne permit să colectăm mult mai multe informații, cum ar fi adresa unui utilizator sau descrierile unui anumit conținut.

 Zona de text

Odată completat formularul nostru, nu trebuie decât să testăm funcționarea acestuia, cum Materializa Incorporează multe efecte în forma noastră și o face extrem de vizuală, să vedem cum arată în următorul GIF.webp animat.

Cum vedem construcția unei forme de bază folosind limbajul de proiectare Proiectarea materialelor și susținut de un cadru de genul Materializa Poate fi o sarcină pe care o putem realiza în câteva minute și obținerea unui rezultat de calitate care nu numai că oferă o vizualitate mai bună, ci și caracteristici pe care le au doar cele mai bune aplicații.

Cel mai bun lucru este că îl descarci și îl încerci, cu siguranță îți va plăcea.

form-material-design.html 2.75K 647 Descărcări