Izradite obrasce s materijalnim dizajnom

Jedan od najtemeljnijih aspekata svake aplikacije su obrasci jer nam oni omogućuju hvatanje korisničkih podataka o poslovnom modelu kojim naša aplikacija upravlja.

Dizajn materijala Kombinirajući najbolje prakse klasičnog dizajna i implementaciju izvornih i inovativnih efekata, omogućuju nam stvaranje obrazaca koji ne samo da izgledaju dobro, već i daju našoj aplikaciji dodatnu funkcionalnost.

Pogledajmo onda kako stvoriti osnovni oblik koristeći načela Dizajn materijala.

ZahtjeviPrije nego započnete ovaj vodič, preporučujemo vam da prošetate kroz uvod u dizajn materijala ovdje. Oslanjat ćemo se na okvir koji se zove Materialize i važno je da razumijemo kako radi spremnik naše aplikacije.

Spremnik za materijalizaciju

Spremnik od Materijalizirati radi na isti način na koji radi BootstrapU slučaju da smo se već dotakli ovog okvira, nećemo imati problema razumjeti kako on funkcionira, ali za one koji ga ne poznaju, to je uglavnom spremnik 12 stupaca, u kojem možemo reći našim elementima koliko stupaca može pokriti.

Ima prilično sličnu hijerarhiju, ima klasu spremnika, nakon koje slijedi klasa retka i na kraju klase primjenjive na stupce, da vidimo kako bi izgledala struktura kompletnog retka, nakon čega slijedi red koji bi sadržavao dva elementa.

Ovo je div s 12 stupacaOvo je div sa 6 stupacaOvo je div sa 6 stupaca

Kako mi to vidimo vrlo je jednostavno, samo moramo biti jasni da imamo dvanaest kolumni za rad i na taj način održavati naš sadržaj organiziranim i vizualno bolje predstavljenim. Već smo vidjeli kako kontejner radi, prijeđimo na izgradnju našeg osnovnog oblika.

Kreiranje obrasca

Kreirajmo a HTML s našom zadanom strukturom i prvo što ćemo učiniti je uključiti knjižnice oboje CSS Kao JavaScript od Materijalizirati i na taj način primijeniti željenu funkcionalnost na naš obrazac.

Važno je da uključimo jQuery u najnovijoj verziji za ispravno funkcioniranje okvira, osim toga moramo uključiti i posebnu liniju koja će nam omogućiti korištenje njegovih ikona.

Nakon što uključimo knjižnice, ostaje konstrukcija našeg obrasca, većina će elemenata imati strukturu sličnu sljedećoj, gdje ćemo imati klasu red, nakon čega slijedi razred kupus i broj stupaca koje će element zauzeti.

ImePrezime

Materijalizirati Omogućuje nam i provjeru valjanosti polja, u slučaju e -pošte označavanjem vrste poruka koje možemo dodijeliti u slučaju da su informacije valjane ili ne, da vidimo:

 E-mail

Također možemo uključiti poznate ikone, značajku preuzetu iz ravnog dizajna koja našoj aplikaciji daje višu razinu upotrebljivosti. Za to ćemo koristiti oznaku s određenom klasom:

 e-mail

Konačno, niti jedan osnovni oblik nije potpun bez poznatog tekstualno područje, tekstualni okviri koji nam omogućuju prikupljanje mnogo više podataka, poput adrese korisnika ili opisa nekog sadržaja.

 Područje teksta

Kad ispunimo obrazac, moramo samo testirati njegovo funkcioniranje, kako Materijalizirati Uključuje mnoge efekte u naš oblik i čini ga vrlo vizualnim, pogledajmo kako to izgleda na sljedećem animiranom GIF.webp -u.

Kako vidimo konstrukciju osnovnog oblika pomoću jezika dizajna Dizajn materijala i podržano okvirom poput Materijalizirati To može biti zadatak koji možemo obaviti u nekoliko minuta i postići kvalitetan rezultat koji ne samo da pruža bolji vizualni prikaz, već i značajke koje imaju samo najbolje aplikacije.

Najbolje je da ga preuzmete i isprobate, sigurno će vam se svidjeti.

form-material-design.html 2,75K 647 preuzimanja