Materializēties - materiāla dizaina CSS sistēma
Google Materiālu dizains mērķis ir labi darboties tīmeklī un arī mobilajās lietotnēs. Tas kļūst arvien populārāks ar izstrādātājiem, un, ja vēlaties to pieņemt, ir daudz veidu, kā savā vietnē ieviest materiālo dizainu. Jūs varat izmantot polimēru vai leņķi, vai arī izmantot materiālus.
Materializācija ir a CSS sistēma, kas balstīta uz materiālu dizaina principiem ar Sass atbalstu labāku attīstību. Tas nodrošina noklusējuma stilu, lai to varētu viegli izmantot, un tajā ir detalizēta dokumentācija.
Jūs varat atrast daudz noderīgu komponentu: dialoglodziņš, modāls, datuma atlasītājs, materiālu pogas, paralakss, kartes un daudz ko citu. Tajā ir arī daudzas navigācijas iespējas, no kurām var izvēlēties, piemēram, nolaižamo izvēlni un cilnes. Materiāls izmanto arī a 12-tīkla sistēma ar 3 noklusējuma ekrāna izmēra multivides vaicājumiem: maksimālais platums 600px ir mobilā ierīce, 992px planšetdatora ierīce un vairāk nekā 992px tiek uzskatīta par darbvirsmas ierīci.
Darba sākšana
Ir divi veidi, kā sākt darbu ar Materialize: use standarta CSS vai Sass. Abus avotus var lejupielādēt šeit. Jūs varat arī saņemt tos ar sējmašīnu, izmantojot šādu komandu:
bower instalēt
Kad esat saņēmis avotus, pārliecinieties, vai tie ir pareizi sasaistīti ar projekta failu vai apkopojat avotu, ja izmantojat Sass versiju.
Iespējas
Šajā sadaļā es izskaidrošu dažas iezīmes, kas piedāvā materiālus.
1. Sass Mixins
Šī sistēma ietver Sass Mixins, kas automātiski pievieno visus pārlūkprogrammas prefiksus, kad rakstāt noteiktas CSS īpašības. Tas ir lielisks līdzeklis, lai nodrošinātu saderība visās pārlūkprogrammās, ar tik mazu satraukumu un kodu, cik vien iespējams.
Apskatiet šādas animācijas īpašības:
-webkit-animācija: 0.5s; -moz-animācija: 0.5s; -o-animācija: 0.5s; -ms-animācija: 0.5s; animācija: 0.5s;
Šīs koda rindas var pārrakstīt ar vienu Sass mixin līniju, piemēram:
@ ietveriet animāciju (.5s);
Ir aptuveni 19 galvenie maisījumi pieejams. Lai redzētu pilnu sarakstu, pāriet uz Sass kategoriju MIXINS cilnē.
2. Plūsmas teksts
Kamēr citas frontendu sistēmas izmanto fiksētu tekstu, Materializē īsteno patiesi atsaucīgu tekstu. Lai saglabātu lasāmību, tiek pielāgots arī teksta izmērs un līnijas augstums. Mazākiem ekrāniem līnijas augstums tiek palielināts.
Lai izmantotu plūsmas tekstu, varat vienkārši pievienot plūsmas teksts klasi uz vēlamā teksta. Piemēram:
Tas ir plūsmas teksts.
Pārbaudiet demonstrāciju šeit sadaļā Teksta plūsma.
3. Ripple efekts ar viļņiem
Materiāla dizains arī ietver interaktīvu atgriezenisko saiti, viens ievērojams piemērs ir pulsa efekts. Materializē, šo efektu sauc Viļņi. Būtībā, kad lietotāji noklikšķina vai pieskaras / pieskaras pogai, kartei vai jebkuram citam elementam, parādās efekts. Viļņus var viegli izveidot, pievienojot viļņi-efekts klasi uz jūsu elementiem.
Šis fragments sniedz jums viļņu efektu.
Iesniegt
Noklusējums ir pelēks. Bet situācijā, kad jums ir tumša krāsa, jūs varat mainīt krāsu. Lai pievienotu citu krāsu, vienkārši pievienojiet viļņi (krāsa) elementam. Nomainiet "(krāsu)" ar krāsas nosaukumu.
Iesniegt
Jūs varat izvēlēties no 7 krāsām: gaisma, sarkana, dzeltena, oranža, violeta, zaļa un zilgana. Jūs vienmēr varat izveidot vai pielāgot savas krāsas, ja šīs krāsas neatbilst jūsu vajadzībām.
4. Ēna
Lai nodrošinātu attiecības starp elementiem, materiāla dizains iesaka izmantot virsmas virsmu. Materializēt sniedz šo principu ar savu z-dziļums (numurs) klasē. Varat noteikt ēnu dziļumu, mainot (numuru) no 1 līdz 5:
Ēnu dziļums 3
Visi ēnu dziļumi ir redzami ar attēlu zemāk.
5. Pogas un ikonas
Materiālu dizainā ir trīs galvenie pogu veidi: poga, fab (peldošās darbības poga) un plakana poga.
(1) Paaugstināta poga
Paaugstinātā poga ir noklusējuma poga. Lai izveidotu šo pogu, vienkārši pievienojiet a btn klase jūsu elementiem. Ja vēlaties to nospiest, nospiežot vai nospiežot, izmantojiet šo:
Poga
Varat arī nosūtīt pogai ikonu pa kreisi vai pa labi no teksta. Par ikonu jums būs jāpievieno pasūtījums ar ikonu klases nosaukumu un pozīciju. Piemēram:
Lejupielādēt
Iepriekš minētajā fragmentā mēs izmantojam mdi-file-file-download klasi lejupielādes ikonai. Ir aptuveni 740 dažādas ikonas tu vari izmantot. Lai tos skatītu, pāriet uz Sass lapu ikonas cilnē.
(2) Peldošā poga
Peldošo pogu var izveidot, pievienojot btn-peldošs klasi un vēlamo ikonu. Piemēram:
Materiāla dizainā dialoglodziņā bieži tiek izmantota plakana poga. Lai to izveidotu, vienkārši pievienojiet btn-flat jūsu elementam, piemēram,:
Samazināt
Turklāt pogas var atspējot ar atspējota klasē un izmantojot lielāku btn-liels klasē.
6. Režģis
Materializē standartu 12 kolonnu atsaucīgs režģis sistēmu. Atbildes reakcija ir sadalīta trīs daļās: mazs (-i) mobilajiem, vidējiem (m) tabletes un liels (l) darbvirsmai.
Lai izveidotu kolonnas, izmantojiet s, m vai l, lai norādītu izmēru, kam seko režģa numurs. Piemēram, ja vēlaties izveidot mobilā ierīcē uz pusēm izmēra izkārtojumu, jums jāietver s6 klasi savā izkārtojumā. s6 nozīmē mazs-6 kas nozīmē 6 kolonnas mazā ierīcē.
Jums jāiekļauj arī a kol klasi izkārtojumā, ko izveidojat, un ievietojiet to elementā, kuram ir rindā klasē. Tas ir tāpēc, ka izkārtojumu var ievietot kolonnās pareizi. Šeit ir piemērs:
Šeit ir 12 kolonnas vai pilns platums4 kolonnas (viena trešdaļa) šeit4 kolonnas (viena trešdaļa) šeit4 kolonnas (viena trešdaļa) šeit
Lūk, rezultāti:
Pēc noklusējuma, col s12 ir fiksēta izmēra un optimizēta visiem ekrāna izmēriem, būtībā tāds pats kā col s12 m12 l12. Bet, ja vēlaties norādīt kolonnu lielumu dažādām ierīcēm. Viss, kas jums jādara, ir uzskaitīt papildu izmērus, piemēram:
Manā platumā vienmēr ir 12 kolonnas visurMan ir 12 slejas mobilajā tālrunī, 6 - planšetdatorā un 9 - darbvirsmā
Izskatās šādi:
Tās ir tikai dažas materiālās iezīmes. Lai uzzinātu vairāk par citām funkcijām, dodieties uz dokumentācijas lapu.
