Materijalizirati - CSS okvir dizajna materijala
Googleov Dizajn materijala ima za cilj dobro funkcioniranje na webu i na mobilnim aplikacijama. To je dobivanjem popularnost s programerima i ako želite da ga usvojiti previše, postoji mnogo načina za provedbu materijala dizajn na Vašem sučelju. Možete koristiti Polymer ili Angular, ili možete koristiti Materialize.
Materijalizirati je CSS okvir temeljen na načelima dizajna materijala sa Sass podrškom za bolji razvoj. Ona nosi zadani stil za jednostavno korištenje i ima detaljnu dokumentaciju.
Možete pronaći mnogo korisnih komponenti unutar: dijaloga, modala, birača datuma, gumba materijala, paralakse, kartica i još mnogo toga. Također ima mnogo opcija za navigaciju od kojih možete birati, kao što su padajući izbornik, slajd u izborniku i karticama. Materijalizira se također koristi a 12-grid sustav s 3 zadana medijska upita veličine zaslona: maksimalna širina 600px je mobilni uređaj, 992px tablet uređaj i više od 992px smatra se stolnim uređajem.
Početak rada
Postoje dva načina da započnete s Materialize: use standardni CSS ili Sass. Oba izvora možete preuzeti ovdje. Također ih možete dobiti s bower pomoću sljedeće naredbe:
instalirati bower instalaciju
Nakon što dobijete izvore, pobrinite se da ih pravilno povežete na datoteci projekta ili da sastavite izvor ako koristite Sass verziju.
Značajke
U ovom odjeljku objasnit ću neke značajke koje nudi Materialise.
1. Sass Mixins
Ovaj okvir nosi Sass Mixins koji automatski dodaje sve prefiksi preglednika kada pišete određena svojstva CSS-a. To je sjajna značajka koju morate osigurati kompatibilnost u svim preglednicima, sa što manje buke i koda, što je više moguće.
Pogledajte sljedeća svojstva animacije:
-webkit-animacija: 0.5s; -moz-animacija: 0.5s; -o-animacija: 0.5s; -ms-animacija: 0.5s; animacija: 0.5s;
Te linije koda mogu se ponovno napisati s jednom linijom Sass mixina tako:
@ uključi animaciju (.5s);
Postoji oko 19 glavnih mješavina dostupno. Da biste vidjeli potpuni popis, idite u kategoriju Sass u izborniku MIXINS kartica.
2. Tekst teksta
Dok drugi okviri sučelja koriste fiksni tekst, Materialize implementira uistinu odgovarajući tekst. Veličina teksta i visina linije također se prilagođavaju kako bi se održala čitljivost. Kada se radi o manjim zaslonima, visina linije se povećava.
Da biste koristili Flow Text, možete jednostavno dodati protoka tekst klasu na željenom tekstu. Na primjer:
Ovo je Flow Text.
Provjerite demo ovdje u odjeljku Flow Text.
3. Utjecaj valova s valovima
Materijalni dizajn također dolazi s interaktivnim povratnim informacijama, jedan od primjera je efekt mreškanja. U materijalizaciji, ovaj se efekt naziva Valovi. Uglavnom kada korisnici kliknu ili dodirnu gumb, karticu ili bilo koji drugi element, pojavljuje se efekt. Valovi se mogu lako stvoriti dodavanjem valovi-efekt klasa na vaše elemente.
Ovaj isječak daje efekt valova.
podnijeti
Uobičajeno je da su valovi sivi. Ali u situaciji u kojoj imate pozadinu tamne boje, možda želite promijeniti boju. Da biste dodali drugu boju, samo dodajte waves- (boja) na element. Zamijenite "(color)" s imenom boje.
podnijeti
Možete birati između 7 boja: svjetlo, crveno, žuto, narančasto, ljubičasto, zeleno i tirkizno. Uvijek možete stvoriti ili prilagoditi vlastite boje ako te boje ne odgovaraju vašim potrebama.
4. Sjena
Da bi se postigli odnosi između elemenata, dizajn materijala preporučuje korištenje visine na površinama. Materijalizirati donosi na ovom principu sa svojim z depth- (broj) klase. Dubinu sjena možete odrediti promjenom (broj) od 1 do 5:
Dubina sjene 3
Sve dubine sjena prikazuju se ispod slike.
5. Gumbi i ikone
U dizajnu materijala postoje tri glavne vrste tipki: podignut gumb, fab (plutajući gumb akcije) i ravna tipka.
(1) Gumb za podizanje
Gumb za podizanje je zadani gumb. Da biste stvorili ovaj gumb, jednostavno dodajte btn klasi na vaše elemente. Ako mu želite dati valni efekt kada ste ga kliknuli ili pritisnuli, idite na sljedeće:
Dugme
Isto tako, gumbu možete dati ikonu s lijeve ili desne strane teksta. Za ikonu ćete morati dodati prilagođeni oznaka s nazivom i položajem klase ikona. Na primjer:
preuzimanje datoteka
U gornjem isječku koji koristimo MDI-datoteka datoteka za preuzimanje klase za ikonu za preuzimanje. Postoji oko 740 različitih ikona možeš koristiti. Da biste ih vidjeli, pređite na stranicu Sass na kartici Ikone.
(2) Plutajući gumb
Plutajući gumb može se stvoriti dodavanjem gmb-plutajući klasa i željena ikona. Na primjer:
U dijaloškom okviru često se koristi ravna tipka u dizajnu materijala. Da biste je stvorili, samo dodajte gmb tanak na svoj element:
Odbiti
Osim toga, gumbi se mogu onemogućiti pomoću tipke onemogućeno klasu i uvećano btn-velika klasa.
6. Mreža
Materialize koristi standard Odgovarajuća mreža od 12 stupaca sustav. Odgovornost je podijeljena u tri dijela: mali za mobitel, srednje (m) za tabletu i veliki (l) za radnu površinu.
Da biste stvorili stupce, koristite s, m ili l za označavanje veličine, nakon čega slijedi broj mreže. Na primjer, kada želite stvoriti pola veličine za mobilni uređaj, trebali biste uključiti S6 klasa u vaš raspored. S6 označava malih 6 što znači 6 stupaca na malom uređaju.
Morate uključiti i klanac klasa u izgledu koji kreirate i stavite ga unutar elementa koji ima red klase. To je tako da se raspored može staviti u stupce ispravno. Evo primjera:
Ovdje imam 12 stupaca ili punu širinuOvdje su 4 stupca (jedna trećina)Ovdje su 4 stupca (jedna trećina)Ovdje su 4 stupca (jedna trećina)
Evo rezultata:
Prema zadanim postavkama, col 12 je fiksne veličine i optimiziran za cijelu veličinu zaslona col 12 m12 l12. Ali ako želite odrediti veličinu stupaca za različite uređaje. Sve što trebate učiniti je navesti dodatne veličine tako:
Moja širina uvijek ima 12 stupaca posvudaImam 12 stupaca na mobitelu, 6 na tabletu i 9 na radnoj površini
Ovo izgleda ovako:
To su samo neke od značajki materijala Materialize. Da biste saznali više o drugim značajkama, idite na stranicu s dokumentacijom.
