Vienas iš esminių bet kurios programos aspektų yra formos, nes jos leidžia mums užfiksuoti vartotojo informaciją apie mūsų programos valdomą verslo modelį.
Medžiagos dizainas Sujungdami geriausią klasikinio dizaino praktiką ir originalių bei novatoriškų efektų įgyvendinimą, jie leidžia mums sukurti formas, kurios ne tik gerai atrodo, bet ir suteikia mūsų programai papildomo funkcionalumo.
Pažiūrėkime, kaip sukurti pagrindinę formą naudojant principus Medžiagos dizainas.
ReikalavimaiPrieš pradėdami šią pamoką, rekomenduojame pasivaikščioti po medžiagos įvadą čia. Mes pasikliausime sistema „Materialize“ ir svarbu suprasti, kaip veikia mūsų programos sudėtinis rodinys.
Materializavimo konteineris
Talpykla iš Materializuotis jis veikia taip pat kaip ir veikia BootstrapJei mes jau palietėme šią sistemą, mums nebus sunku suprasti, kaip ji veikia, tačiau tiems, kurie jos nežino, tai daugiausia yra 12 stulpelių, kuriame galime pasakyti savo elementams, kiek stulpelių jis gali apimti.
Ji turi gana panašią hierarchiją, turi konteinerių klasę, po to eilučių klasę ir galiausiai stulpeliams taikomas klases, pažiūrėkime, kaip atrodytų visos eilutės struktūra, o po to - eilutė, kurioje būtų du elementai.
Tai 12 stulpelių skyriusTai 6 stulpelių skyriusTai 6 stulpelių skyriusTai, kaip mes tai matome, yra gana paprasta, tik turime aiškiai pasakyti, kad turime dvylika stulpelių, su kuriais galime dirbti, ir tokiu būdu turinys turi būti sutvarkytas ir vizualiai geriau pateiktas. Jau matydami, kaip veikia konteineris, pereikime prie pagrindinės formos konstrukcijos.
Formos kūrimas
Sukurkime a HTML su mūsų numatytąja struktūra ir pirmas dalykas, kurį padarysime, yra abiejų bibliotekų įtraukimas CSS Kaip „JavaScript“ apie Materializuotis ir tokiu būdu pritaikyti norimą funkcionalumą savo formai.
Svarbu, kad įtrauktume „jQuery“ naujausioje versijoje, kad sistema tinkamai veiktų, be to, turime įtraukti specialią eilutę, kuri leis mums naudoti jos piktogramas.
Įtraukę bibliotekas, mūsų formos konstrukcija išlieka, daugumos elementų struktūra bus panaši į šią, kur turėsime klasę eilė, po to seka klasė kopūstai ir stulpelių, kuriuos elementas užims, skaičių.
vardasPavardėMaterializuotis Tai taip pat leidžia mums patvirtinti laukus el. Pašto atveju, nurodant tipą, kuriuo galime priskirti pranešimus, jei informacija yra teisinga ar ne, pažiūrėkime:
PaštuTaip pat galime įtraukti garsias piktogramas - tai funkcija, paimta iš plokščio dizaino, kuri suteikia mūsų programai aukštesnį naudojimo lygį. Tam naudosime žymę su konkrečia klase:
paštuGaliausiai, jokia pagrindinė forma nėra išsami be garsiosios tekstūra, teksto laukeliai, leidžiantys rinkti daug daugiau informacijos, pvz., naudotojo adresą ar tam tikro turinio aprašus.
Teksto sritisUžpildę formą, turime tik patikrinti, kaip ji veikia Materializuotis Į mūsų formą įtraukta daug efektų ir ji tampa labai vizuali, pažiūrėkime, kaip tai atrodo toliau pateiktame animaciniame GIF.webp.
Kaip mes matome pagrindinės formos kūrimą naudojant dizaino kalbą Medžiagos dizainas ir paremta tokia sistema Materializuotis Tai gali būti užduotis, kurią galime atlikti per kelias minutes ir gauti kokybišką rezultatą, kuris ne tik suteikia geresnį vaizdą, bet ir funkcijas, kurias turi tik geriausios programos.
Geriausia tai, kad atsisiųsite ir išbandysite, jums tikrai patiks.
forma-medžiaga-dizainas.html 2,75 tūkst 647 atsisiuntimai
