Atlikti materialaus dizaino CSS sistemą
„Google“ Medžiagos dizainas yra skirtas gerai dirbti internete ir mobiliuosiuose programose. Jis įgyja populiarumą su kūrėjais ir, jei norite jį priimti, taip pat yra daug būdų įdiegti „Material Design“ savo svetainėje. Galite naudoti polimerą arba kampinį, arba galite naudoti „Materialize“.
Materializacija yra a CSS sistema, pagrįsta „Material Design“ principais su „Sass“ palaikymu geresniam vystymuisi. Jis atlieka numatytąjį stilių, kad jį būtų lengva naudoti, ir turi išsamų dokumentaciją.
Čia rasite daug naudingų komponentų: dialogo, modalinio, datos rinkiklio, medžiagų mygtukų, paralakso, kortelių ir kt. Jame taip pat yra daug navigacijos parinkčių, kurias galite pasirinkti, pvz., Išskleidžiamajame meniu, skaidrių meniu ir skirtukų. Taip pat panaudojama a 12 tinklų sistema su 3 numatytomis ekrano dydžio žiniasklaidos užklausomis: maksimalus 600px plotis yra mobilusis prietaisas, 992px planšetinis įrenginys ir daugiau nei 992px laikomas staliniu įrenginiu.
Darbo pradžia
Yra du būdai, kaip pradėti su Materialize: use standartinis CSS arba Sass. Abu šaltiniai gali būti atsisiųsti čia. Taip pat galite gauti juos su lazdele naudodami šią komandą:
„Bower“ įrengimas įvyksta
Kai gausite šaltinius, įsitikinkite, kad juos tinkamai susieti su savo projekto failu arba kompiliuokite šaltinį, jei naudojate „Sass“ versiją.
funkcijos
Šiame skyriuje paaiškinsiu keletą funkcijų, kurios pasižymi pasiūlymais.
1. Sass Mixins
Ši sistema apima „Sass Mixins“, kuri automatiškai prideda visus naršyklės prefiksus, kai rašote tam tikras CSS savybes. Tai puiki funkcija, kurią reikia užtikrinti suderinamumas visose naršyklėse, su kuo mažiau triukšmo ir kodo.
Pažvelkite į šias animacijos ypatybes:
-webkit-animacija: 0.5s; -moz-animacija: 0.5s; -o-animacija: 0.5s; -ms-animacija: 0,5s; animacija: 0,5s;
Šias kodo eilutes galima perrašyti su viena „Sass mixin“ linija taip:
@include animation (.5s);
Yra apie 19 pagrindinių mišinių galima. Norėdami pamatyti visą sąrašą, pereikite prie Sass kategorijos MIXINS skirtuką.
2. Srauto tekstas
Kituose „frontend“ sistemose naudojamas fiksuotas tekstas, o materializavimas įgyvendina tikrai atsakingą tekstą. Teksto dydis ir linijos aukštis taip pat padidinami, kad būtų išlaikytas skaitymas. Kai kalbama apie mažesnius ekranus, linijos aukštis padidinamas.
Norėdami naudoti srauto tekstą, galite tiesiog pridėti srauto tekstas klasę ant norimo teksto. Pavyzdžiui:
Tai yra srauto tekstas.
Patikrinkite demonstraciją čia skiltyje „Srauto tekstas“.
3. Ripple efektas su bangomis
Medžiagos dizainas taip pat yra su interaktyviu grįžtamuoju ryšiu. Įgyvendinant, šis efektas vadinamas Bangos. Iš esmės, kai vartotojai spustelės arba palies, / palieskite mygtuką, kortelę ar bet kurį kitą elementą, atsiranda efektas. Bangos gali būti lengvai sukuriamos pridedant bangų efektas į savo elementus.
Šis fragmentas suteikia jums bangų efektą.
Pateikti
Pagal nutylėjimą raiščiai yra pilki. Tačiau situacijoje, kai turite tamsios spalvos foną, galite pakeisti spalvą. Jei norite pridėti kitą spalvą, tiesiog pridėkite bangos (spalva) elementą. Pakeiskite „(spalvos)“ spalvos pavadinimu.
Pateikti
Galite rinktis iš 7 spalvų: šviesos, raudonos, geltonos, oranžinės, violetinės, žalios ir rudos. Visada galite kurti arba tinkinti savo spalvas, jei šios spalvos neatitinka jūsų poreikių.
4. Šešėlis
Norėdami užtikrinti ryšį tarp elementų, medžiagos dizainas rekomenduoja naudoti ant paviršių aukštį. Įgyvendinkite šį principą su savo z-gylis (skaičius) klasė. Galite nustatyti šešėlio gylį keisdami (skaičių) nuo 1 iki 5:
Šešėlių gylis 3
Visi šešėlių gyliai rodo toliau pateiktą vaizdą.
5. Mygtukai ir piktogramos
Medžiagų dizaine yra trys pagrindiniai mygtukų tipai: iškeltas mygtukas, fab (plaukiojančio veiksmo mygtukas) ir plokščias mygtukas.
(1) Pakeliamas mygtukas
Pakeliamas mygtukas yra numatytasis mygtukas. Norėdami sukurti šį mygtuką, tiesiog pridėkite a btn klasę į savo elementus. Jei norite, kad paspaudus arba paspaudus, bangų efektą, atlikite šį veiksmą:
Mygtukas
Taip pat galite suteikti mygtukui teksto kairėje arba dešinėje esančią piktogramą. Jei norite naudoti piktogramą, turėsite pridėti įprastą žyma su piktogramos klasės pavadinimu ir pozicija. Pavyzdžiui:
parsisiųsti
Pirmiau pateiktame fragmente mes naudojame mdi-file-file-download klasė atsisiuntimo piktogramai. Yra apie 740 skirtingų piktogramų tu gali naudoti. Jei norite matyti juos, pereikite prie „Sass“ puslapio piktogramų skirtuke.
(2) Plaukiojantis mygtukas
Kintantis mygtukas gali būti sukurtas pridedant btn-plūduriuojantis klasės ir norimos piktogramos. Pavyzdžiui:
Medžiagų dizaino metu dialogo lange dažnai naudojamas plokščias mygtukas. Norėdami ją sukurti, tiesiog pridėkite btn-flat prie jūsų elemento taip:
Atmesti
Be to, mygtukus galima išjungti su išjungta klasę ir naudojant didesnę btn-large klasė.
6. Tinklelis
Įgyvendinti naudojamas standartas 12 stulpelių reaguojantis tinklelis sistema. Atsakomybė suskirstyta į tris dalis: mažas (-i) mobiliesiems, vidutinio dydžio (m) planšetinio kompiuterio ir didelis (l) darbalaukyje.
Jei norite sukurti stulpelius, naudokite s, m arba l, norėdami nurodyti dydį, po to - tinklo numerį. Pvz., Jei norite sukurti mobiliojo prietaiso pusę dydžio išdėstymą, turėtumėte įtraukti s6 klasę į savo išdėstymą. s6 reiškia mažas-6 tai reiškia 6 stulpelius ant mažo įrenginio.
Taip pat turite įtraukti a col klasė, kurią sukuriate, ir įdėkite jį į elementą, kuriame yra eilutė klasė. Taip išdėstymas gali būti tinkamai išdėstytas stulpeliuose. Štai pavyzdys:
Čia turiu 12 stulpelių arba visą plotį4 stulpeliai (vienas trečdalis) čia4 stulpeliai (vienas trečdalis) čia4 stulpeliai (vienas trečdalis) čia
Štai rezultatai:
Pagal numatytuosius nustatymus, col s12 yra fiksuoto dydžio ir optimizuotas visam ekrano dydžiui, iš esmės tas pats, kaip col s12 m12 l12. Bet jei norite nurodyti skirtingų įrenginių stulpelių dydį. Viskas, ką jums reikia padaryti, yra išvardyti tokius papildomus dydžius:
Mano plotis visur turi 12 stulpeliųTuriu 12 stulpelių mobiliajame telefone, 6 - tabletėse ir 9 - darbalaukyje
Štai kaip atrodo:
Tai tik keletas materializacijos savybių. Jei norite sužinoti daugiau apie kitas funkcijas, pereikite prie dokumentacijos puslapio.
