Kiire sissejuhatus materjalide kujundamisse, kasutades materialiseerimist

Mis on materjalidisain?

Materjalidisain on Google'i loodud disainikeel. Materjali disaini eesmärk on materjali.io andmetel ühendada:

… Hea disaini klassikalised põhimõtted koos tehnoloogia ja teaduse uuenduste ja võimalustega. Selle eesmärk on välja töötada üks alus süsteem, mis võimaldab ühtset kasutuskogemust platvormide ja seadmete suuruste vahel. Mobiilsed ettekirjutused on põhimõttelised, kuid puutetundlikkus, hääl, hiir ja klaviatuur on kõik esimese klassi sisestusmeetodid.

Miks kasutada materjalidisaini?

Materjalikujundus pakub sujuvat kasutuskogemust kõigis seadmetes. Reageerivad üleminekud ja animatsioon koos polsterdus- ja sügavusefektidega, nagu varjud ja välk, muudavad selle elegantse ja kasutajasõbralikuks. Google kasutab materjalidisaini peaaegu kõigis oma rakendustes (nt Keep ja Calendar).

Kuidas saate oma veebirakendustes kasutada materjalidisaini?

Materialize on Bootstrapiga sarnane reageeriv esiotsa komponentide teek. See pakub kõike, mida Bootstrap pakub, kuid erinevus seisneb selles, et Materialize järgib materjali kujundamise põhimõtteid. Siin on näidismall.

Siin on loend funktsioonidest, mida Materialize pakub:

  • Võre
  • Tabelid
  • Märgid, nööbid, riivsai
  • Kaardid, kiibid, kollektsioonid
  • Jalus, vormid
  • Navbar
  • Ja palju muud!

Kuidas alustada

Erinevalt Bootstrapist ei vaja Materialize popper.js-i. See nõuab ainult jQuery-d. See on kõik, mida vajate alustamiseks. Lisage see oma HTML-ile ja teil on hea minna!

Värvid

Rakenduse Materialize abil saate muuta mis tahes HTML-elemendi värvi, andes talle lihtsalt soovitud värvi klassi nime. Näiteks kui soovite oma lõigusildile anda punase värvi, siis tehke järgmist.

Lorem Ipsum

Lisaks saate värvi ka heledamaks muuta, andes sellele teise klassi nime lighten-1või darken-1. Näiteks,

Sample Text

. 1 saab heledamaks muuta kuni 5-ga ja tumedamaks kuni 4-ga. Suurema arvu korral rakendatakse värvi heledamaid või tumedamaid toone.

Nööbid

Nupu realiseerimiseks andke sellele lihtsalt klassi nimi btn. Sellele saate lisada ka laheda animatsiooni, andes sellele teise klassi waves-effect. Kui vajate suuremat nuppu, btn-largesaab kasutada klassi. Näiteks:

 Click    Click    Click  

Varju

Materjalikujunduses peaks kõigel olema teatud z-sügavus, mis määrab, kui kaugel leht on lehe kõrgusel või lähedal.

Varjefekti rakendamiseks elemendile z-depth-2saab kasutada klassi (2 saab asendada numbritega 1–5). Näiteks:

Järeldus

Olen siin ainult pinda kriimustanud. Materjalides on palju muud saadaval (näiteks üleminekud, kaardid, karussell ja modaalid). Kõigi komponentide kasutamist saate õppida dokumentidest. Klasside nimed on väga lihtsad ja võrk on reaalsete veergude kiireks loomiseks tõesti kasulik. Ma soovin sulle edu!