Materjalidisaini kiire tutvustus kasutades Materialiseeri

Mis on materjalidisain?

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

... hea disaini klassikalised põhimõtted koos innovatsiooni ja tehnoloogia ning teaduse võimalusega. Selle eesmärk on välja töötada ühtne põhisüsteem, mis võimaldab ühtset kogemust platvormide ja seadme suuruste vahel. Mobiilsed ettekirjutused on põhilised, kuid puudutus, hääl, hiir ja klaviatuur on kõik esimese klassi sisestusmeetodid.

Miks kasutada materjalidisaini?

Materjalidisain pakub sujuvat kasutajakogemust kõigis seadmetes. Vastuvõtlikud üleminekud ja animatsioon koos polsterduse ja sügavusefektidega, nagu varjud ja välk, muudavad selle elegantseks ja kasutajasõbralikuks. Google kasutab materjalidisaini peaaegu kõigis rakendustes (nt Keep ja Kalender).

Kuidas saate materjalide kujundamist oma veebirakendustes kasutada?

Realiseerumine on Bootstrapiga sarnane reageeriv esiotsa komponentide kogu. 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 loetelu funktsioonidest, mida materialiseerumine pakub:

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

Kuidas alustada?

Erinevalt Bootstrapist ei vaja materialiseerumine popper.js kasutamist. See nõuab ainult jQuery. See on kõik, mida peate alustama. Lisage see oma HTML-i ja teil on hea minna!




Värvid

Funktsiooni materialiseerimine abil saate muuta mis tahes HTML-i elemendi värvi, andes sellele lihtsalt soovitud värvi klassinime. Näiteks kui soovite oma lõigumärgendile anda punase värvi, toimige järgmiselt.

Lorem Ipsum

Lisaks saate värvi heledamaks või tumedamaks muuta, määrates sellele uue klassi nime heledam-1 või tumedamaks-1. Näiteks

Teksti näidis

. 1 saab asendada numbritega kuni 5 heleduse korral ja kuni 4 tumenemise korral. Suuremate numbrite korral on värvi heledamad või tumedamad toonid.

Nupud

Nupu realiseerimiseks andke sellele lihtsalt klassi nimi btn. Saate sellele lisada ka laheda animatsiooni, andes sellele veel ühe klassi lainetefekti. Kui vajate suuremat nuppu, saab kasutada btn-suurt klassi. Näiteks:


  Klõpsake nuppu
 

  Klõpsake nuppu
 

  Klõpsake nuppu
 

Vari

Materjalidisainis peaks kõigel olema kindel z-sügavus, mis määrab, kui kaugele tõstetud või lehe lähedal element on.

Variefekti rakendamiseks elemendile võib kasutada klassi z-sügavus-2 (2 võib asendada numbritega 1–5). Näiteks:

Järeldus

Ma olen siin ainult pinda kriimustanud. Materjaliseerimisvõimalusi on palju rohkem (näiteks üleminekud, kaardid, karussell ja modaalid). Kõigi komponentide kasutamist saate õppida dokumentidest. Klasside nimed on väga lihtsad ja ruudustik on tundlike veergude kiireks loomisel tõesti abiks. Ma soovin sulle edu!