Viens no būtiskākajiem aspektiem jebkurā lietojumprogrammā ir veidlapas, jo tās ļauj mums iegūt lietotāja informāciju par mūsu lietojumprogrammas pārvaldīto uzņēmējdarbības modeli.
Materiālu dizains Apvienojot klasiskā dizaina paraugpraksi un oriģinālu un novatorisku efektu ieviešanu, tie ļauj mums izveidot veidlapas, kas ne tikai izskatās labi, bet arī piešķir mūsu lietojumprogrammai papildu funkcionalitāti.
Apskatīsim, kā izveidot pamatformu, izmantojot principus Materiālu dizains.
PrasībasPirms šīs apmācības uzsākšanas iesakām izstaigāt materiāla dizaina ievadu šeit. Mēs paļausimies uz ietvaru, ko sauc par materializāciju, un ir svarīgi saprast, kā darbojas mūsu lietojumprogrammas konteiners.
Materiāla konteiners
Konteiners no Materializēties tas darbojas tāpat kā tas darbojas BootstrapJa mēs jau esam pieskārušies šai sistēmai, mums nebūs problēmu saprast, kā tā darbojas, bet tiem, kas to nezina, tas galvenokārt ir 12 kolonnas, kurā mēs varam saviem elementiem pateikt, cik kolonnu tas var aptvert.
Tai ir diezgan līdzīga hierarhija, tai ir konteinera klase, kam seko rindu klase un visbeidzot kolonnām piemērojamās klases, paskatīsimies, kā izskatītos visas rindas struktūra, kam seko rinda, kurā būtu divi elementi.
Tas ir 12 kolonnu divTas ir 6 kolonnu divTas ir 6 kolonnu divTas, kā mēs to redzam, ir pavisam vienkāršs, mums vienkārši ir jābūt skaidram, ka mums ir divpadsmit slejas, ar kurām strādāt, un šādā veidā mūsu saturs ir sakārtots un vizuāli labāk pasniegts. Jau redzot, kā darbojas konteiners, pāriesim pie mūsu pamatformas uzbūves.
Veidlapas veidošana
Izveidosim a HTML ar mūsu noklusējuma struktūru un pirmā lieta, ko mēs darīsim, ir iekļaut abu bibliotēkas CSS patīk JavaScript no Materializēties un šādā veidā piemērot veidlapai vēlamo funkcionalitāti.
Ir svarīgi, lai mēs iekļautu jQuery jaunākajā versijā, lai pareizi darbotos ietvars, turklāt mums ir jāiekļauj īpaša līnija, kas ļaus mums izmantot tās ikonas.
Kad būsim iekļāvuši bibliotēkas, mūsu veidlapas uzbūve saglabāsies, lielākajai daļai elementu būs līdzīga struktūra kā šeit, kur mums būs klase rinda, kam seko klase kāposti un kolonnu skaitu, ko elements aizņems.
VārdsUzvārdsMaterializēties Tas arī ļauj mums apstiprināt laukus, e -pasta gadījumā, norādot veidu, kādā mēs varam piešķirt ziņojumus gadījumā, ja informācija ir derīga vai nē, apskatīsim:
E-pastsMēs varam iekļaut arī slavenās ikonas - funkciju, kas ņemta no plakanā dizaina, kas mūsu lietojumprogrammai nodrošina augstāku lietojamības līmeni. Šim nolūkam mēs izmantosim tagu ar konkrēto klasi:
e-pastuVisbeidzot, neviena pamatforma nav pilnīga bez slavenā tekstūra, tekstlodziņus, kas ļauj apkopot daudz vairāk informācijas, piemēram, lietotāja adresi vai kāda satura aprakstus.
Teksta apgabalsKad esam aizpildījuši veidlapu, mums tikai jāpārbauda tā darbība Materializēties Tas mūsu veidlapā ietver daudzus efektus un padara to ļoti vizuālu. Apskatīsim, kā tas izskatās nākamajā animētajā GIF.webp.
Kā mēs redzam pamatformas veidošanu, izmantojot dizaina valodu Materiālu dizains un to atbalsta sistēma Materializēties Tas var būt uzdevums, ko mēs varam paveikt dažu minūšu laikā un iegūt kvalitatīvu rezultātu, kas ne tikai nodrošina labāku vizuālo, bet arī funkcijas, kas piemīt tikai labākajām lietojumprogrammām.
Labākais ir tas, ka jūs to lejupielādējat un izmēģināt, jums tas noteikti patiks.
form-material-design.html 2.75K 647 lejupielādes
