Materialiseeri - materiaalse disaini CSS raamistik
Google'i Materjali disain eesmärk on veebis ja ka mobiilirakendustes hästi töötada. Arendajate hulgas on see populaarsus ja kui soovite seda ka vastu võtta, on materjalide disaini rakendamiseks oma saidil palju võimalusi. Võite kasutada Polymer või Angular või kasutada materialize.
Materialiseerumine on a CSS raamistik, mis põhineb materjali kujundamise põhimõtetel koos Sass'i toega paremaks arenguks. See hõlbustab lihtsat kasutamist ja sisaldab üksikasjalikku dokumentatsiooni.
Siin on palju kasulikke komponente: dialoog, modaal, kuupäeva valija, materjali nupud, parallaks, kaardid ja palju muud. Sellel on ka palju navigeerimisvalikuid, mida saate valida, näiteks rippmenüüst, slaidi menüüst ja vahekaartidest. Materialiseerimisel kasutatakse ka a 12-võrgusüsteem 3 vaikimisi ekraani suurusega meedia päringuga: maksimaalne laius 600px on mobiilne seade, 992px tahvelarvuti seade ja enam kui 992px peetakse töölaua seadmeks.
Alustamine
Alustamiseks on kaks võimalust: kasutamine standardne CSS või Sass. Mõlemad allikad saab alla laadida siit. Neid saab ka boweriga kasutada järgmise käsuga:
boweri paigaldamine realiseerub
Kui olete allikad kätte saanud, ühendage kindlasti need oma projektifailis või kompileerige allikas, kui kasutate Sass'i versiooni.
Omadused
Selles osas selgitan mõningaid funktsioone, mis pakuvad pakkumisi.
1. Sass Mixins
See raamistik kannab Sass Mixinsi, mis lisab teatud CSS-i omaduste kirjutamisel automaatselt kõik brauseri prefiksid. See on suurepärane omadus tagada ühilduvus kõigis brauserites, võimalikult vähe mürka ja koodi.
Vaadake järgmisi animatsiooni omadusi:
-webkit-animatsioon: 0.5s; -moz-animatsioon: 0.5s; -o-animatsioon: 0.5s; -ms-animatsioon: 0.5s; animatsioon: 0.5s;
Neid koodide ridu saab ümber kirjutada ühe Sass mixiniga sarnase reaga:
@include animation (.5s);
On umbes 19 peamist segu saadaval. Täieliku loendi vaatamiseks liigu Sass kategooriasse MIXINS vahekaart.
2. Voolu tekst
Kui teised esipaneeliraamistikud kasutavad fikseeritud teksti, rakendab Materializes tõeliselt tundlikku teksti. Teksti suurust ja joone kõrgust muudetakse ka loetavuse säilitamiseks. Väiksemate ekraanide puhul suurendatakse joone kõrgust.
Flow Text'i kasutamiseks saate lihtsalt lisada voolu-tekst klassi soovitud tekstis. Näiteks:
See on voolu tekst.
Tutvuge demoga siin voolu tekstiosas.
3. Ripple efekt lainetega
Materjalide disainiga kaasneb ka interaktiivne tagasiside, üks märkimisväärne näide on pulsatsiooniefekt. Materialiseerimisel nimetatakse seda efekti Lained. Põhimõtteliselt kuvatakse efekt, kui kasutajad klõpsavad või puudutavad / puudutavad nuppu, kaarti või muud elementi. Laineid saab hõlpsasti luua lisades lainete mõju klassi oma elementidele.
See väljavõte annab teile lainete efekti.
Esita
Rippmed on vaikimisi hallid. Kuid olukorras, kus teil on tume värviline taust, võite värvi muuta. Teise värvi lisamiseks lisage lihtsalt lained- (värv) elemendile. Asendage "(värv)" värvi nimega.
Esita
Saad valida 7 värvi vahel: kerge, punane, kollane, oranž, lilla, roheline ja roheline. Saate alati luua või kohandada oma värve, kui need värvid ei vasta teie vajadustele.
4. Vari
Elementide vaheliste suhete tagamiseks soovitame materjali disainil kasutada pindade kõrgust. Materialiseerub selle põhimõtte elluviimisega z-sügavus- (number) klassi. Varju sügavust saab määrata (numbri) muutmisega 1 kuni 5:
Varju sügavus 3
Kõik varju sügavused on näidatud alltoodud pildiga.
5. Nupud ja ikoonid
Materjali disainis on kolm peamist nuppu: tõstetud nupp, fab (ujuva tegevuse nupp) ja lame nupp.
(1) Tõstetud nupp
Tõstetud nupp on vaikenupp. Selle nupu loomiseks lisage lihtsalt a btn klassi oma elementidele. Kui soovite klõpsamisel või vajutamisel seda laineefekti anda, järgige seda:
Nupp
Teise võimalusena võite nupule anda ka teksti vasakule või paremale. Ikooni jaoks peate lisama kohandatud sildi ikooni klassi nimi ja asukoht. Näiteks:
Lae alla
Ülaltoodud väljavõttes kasutame mdi-file-file-download klassi allalaadimise ikooni jaoks. On umbes 740 erinevat ikooni sa võid kasutada. Nende vaatamiseks Sass lehele vahekaardil Ikoonid.
(2) Ujuv nupp
Lisades saab luua ujuva nupu btn-ujuv klass ja soovitud ikoon. Näiteks:
Materjalide disainis kasutatakse dialoogiboksis sageli lame nuppu. Selle loomiseks lisage lihtsalt btn-korter teie elemendile nagu:
Langus
Lisaks saab nupuga keelatud klassi ja suuremaks btn-large klassi.
6. Võrk
Materialiseerimisel kasutatakse standardit 12 veergu reageeriv võrk süsteem. Vastus on jagatud kolme ossa: väike (d) mobiilile, keskmise (m) tablettide ja suur (l) töölauale.
Veerude loomiseks kasutage s, m või l, et näidata suurust, millele järgneb võrgu number. Näiteks, kui soovite luua mobiilseadme poole suurusega paigutuse, siis peaksite lisama ka s6 klassi oma paigutusse. s6 tähistab väike-6 mis tähendab 6 veergu väikese seadme juures.
Peate lisama ka a col klassi paigutuses, mida loote, ja pane see elemendi sisse, millel on rida klassi. See on nii, et paigutust saab õigesti veergudesse panna. Siin on näide:
Siin on siin 12 veergu või täislaius4 veergu (üks kolmandik) siin4 veergu (üks kolmandik) siin4 veergu (üks kolmandik) siin
Siin on tulemused:
Vaikimisi, col s12 on kindla suurusega ja optimeeritud kõigi ekraani suuruste jaoks, põhimõtteliselt sama mis col s12 m12 l12. Aga kui soovite määrata erinevate seadmete veergude suuruse. Kõik, mida pead tegema, on loetleda sellised täiendavad suurused:
Minu laiusel on alati 12 veergu kõikjalMul on mobiilil 12 veergu, tahvelarvutil 6 ja töölaual 9
Siin näeb välja selline:
Need on vaid mõned funktsioonid materialiise kohta. Lisateavet nende muude funktsioonide kohta saate dokumentatsiooni lehele.
