Uresniči - Okvir CSS materialnega dizajna
Google Oblikovanje materiala je namenjen dobremu delu v spletu in tudi v mobilnih aplikacijah. To je vedno bolj priljubljena pri razvijalcih in če jo želite tudi sprejeti, obstaja veliko načinov za izvedbo materialnega oblikovanja na vašem spletnem mestu. Uporabite lahko Polymer ali Angular ali pa uporabite možnost Materialize.
Materializira se CSS okvir, ki temelji na načelih Material Design z podporo Sass za boljši razvoj. Za enostavno uporabo nosi privzeto obliko in ima podrobno dokumentacijo.
V njem lahko najdete veliko uporabnih komponent: dialog, modal, izbirnik datumov, materialne gumbe, paralakse, kartice in drugo. Prav tako ima številne možnosti navigacije, med katerimi lahko izbirate, na primer spustni meni, diapozitiv v meniju in zavihki. Materializira se tudi uporaba a 12-omrežni sistem s tremi medijskimi poizvedbami za privzeto velikost zaslona: največja širina 600px je mobilna naprava, tablična naprava 992px in več kot 992px velja za napravo za namizje.
Kako začeti
Obstajata dva načina za začetek s Materialize: use standardni CSS ali Sass. Oba vira lahko prenesete tukaj. Lahko jih dobite tudi z bowerjem z naslednjim ukazom:
uresničite
Ko dobite vire, se prepričajte, da ste jih pravilno povezali v projektni datoteki ali jih sestavili, če uporabljate različico Sass.
Lastnosti
V tem razdelku bom razložil nekatere funkcije, ki jih ponuja Materialise.
1. Sass Mixins
Ta okvir vsebuje Sass Mixins, ki samodejno doda vse predpone brskalnika, ko pišete določene lastnosti CSS. To je odlična funkcija, ki jo je treba zagotoviti združljivost v vseh brskalnikih, s čim manjšo napako in kodo, kot je mogoče.
Oglejte si naslednje lastnosti animacije:
-webkit-animacija: 0.5s; -moz-animacija: 0,5s; -o-animacija: 0,5s; -ms-animacija: 0,5s; animacija: 0.5s;
Te vrstice kode je mogoče ponovno napisati z eno vrstico Sass mixina tako:
@ vključi animacijo (.5s);
Obstaja približno 19 glavnih mešanic na voljo. Če si želite ogledati celoten seznam, pojdite v kategorijo Sass v meniju MIXINS zavihek.
2. Besedilo pretoka
Medtem ko drugi okvirji frontendov uporabljajo fiksno besedilo, Materialize izvaja resnično odzivno besedilo. Velikost besedila in višina črte se tudi ustrezno prilagodita, da se ohrani berljivost. Ko gre za manjše zaslone, se višina črte poveča.
Če želite uporabiti besedilo Flow, lahko preprosto dodate besedilo pretoka na želeno besedilo. Na primer:
To je Flow Text.
Oglejte si demo tukaj v razdelku Flow Text.
3. Učinek valovanja z valovi
Material Design je opremljen tudi z interaktivnimi povratnimi informacijami, en pomemben primer je učinek valovanja. V materializaciji se ta učinek imenuje Valovi. V bistvu, ko uporabniki kliknejo ali se dotaknejo gumba, kartice ali katerega koli drugega elementa, se učinek prikaže. Valove lahko enostavno ustvarite z dodajanjem valovanje-učinek razred na vaše elemente.
Ta delček vam daje učinek valov.
Pošlji
Vzorci so privzeto sivi. Toda v situaciji, ko imate temno barvno ozadje, boste morda želeli spremeniti barvo. Če želite dodati drugo barvo, jo dodajte valovi (barve) elementu. Zamenjajte "(barva)" z imenom barve.
Pošlji
Izbirate lahko med 7 barvami: svetlo, rdeče, rumeno, oranžno, vijolično, zeleno in zeleno. Vedno lahko ustvarite ali prilagodite svoje barve, če te barve ne ustrezajo vašim potrebam.
4. Senca
Da bi zagotovili razmerja med elementi, Design Material priporoča uporabo višin na površinah. Materializiramo to načelo s svojim z-globino (število) razred. Globino senc lahko določite tako, da spremenite (število) od 1 do 5:
Globina sence 3
Vse globine senc so prikazane s spodnjo sliko.
5. Gumbi in ikone
V izdelavi materiala so tri glavne vrste gumbov: dvignjen gumb, fab (gumb za plavajoče dejanje) in ploski gumb.
(1) Gumb za dvig
Dvignjen gumb je privzeti gumb. Če želite ustvariti ta gumb, dodajte a btn vaših elementov. Če želite, da se jim prikaže učinek valovanja, ko ste ga kliknili ali pritisnili, nadaljujte s tem:
Gumb
Druga možnost je, da tipki dodate ikono levo ali desno od besedila. Za ikono boste morali dodati po meri z imenom in položajem razreda ikon. Na primer:
Prenesi
V zgornjem odseku uporabljamo mdi-file-file-download za ikono za prenos. Obstaja približno 740 različnih ikon lahko uporabiš. Če jih želite videti na strani Sass na zavihku Ikone.
(2) Plavajoči gumb
Plavajoči gumb lahko ustvarite z dodajanjem btn-plava in želeno ikono. Na primer:
V oblikovanju materiala se v pogovornem oknu pogosto uporablja ploski gumb. Če ga želite ustvariti, dodajte btn-flat v vaš element tako:
Zavrni
Poleg tega lahko gumbe onemogočite z onemogočeno razredu in večjo uporabo btn-velika razred.
6. Mreža
Materialize uporablja standard Odzivna mreža z 12 kolonami sistema. Odzivnost je razdeljena na tri dele: majhna za mobilno, srednje (m) za tablete in velika (l) za namizje.
Za ustvarjanje stolpcev uporabite s, m ali l, da označite velikost, ki ji sledi številka omrežja. Na primer, če želite ustvariti polovično velikost za mobilno napravo, morate vključiti s6 razred v vašo postavitev. s6 pomeni majhna-6 kar pomeni 6 stolpcev na majhni napravi.
Vključiti morate tudi col razred v postavitvi, ki jo ustvarite, in jo postavite v element, ki ima vrstico razred. To je zato, da bi lahko postavitev pravilno vstavili v stolpce. Tukaj je primer:
Tukaj imam 12 stolpcev ali polno širinoTukaj so 4 stolpci (ena tretjina)Tukaj so 4 stolpci (ena tretjina)Tukaj so 4 stolpci (ena tretjina)
Tukaj so rezultati:
Privzeto, col 12 je fiksna velikost in optimizirana za celotno velikost zaslona, v bistvu enaka kot col 12 m12 l12. Ampak, če želite določiti velikost stolpcev za različne naprave. Vse kar morate storiti je, da navedete dodatne velikosti:
Moja širina ima vedno 12 stolpcev povsodImam 12 stolpcev na mobilnih napravah, 6 na tabličnem računalniku in 9 na namizju
Izgleda to:
To so le nekatere značilnosti materiala. Če želite izvedeti več o drugih funkcijah, pojdite na stran z dokumentacijo.
