Materializáljon - egy anyagtervezési CSS keretrendszert
Google Anyagtervezés célja, hogy jól működjön a weben és a mobil alkalmazásokban is. A fejlesztők körében népszerűvé válik, és ha azt is szeretné elfogadni, számos módja van az Anyagtervezés megvalósításának a webhelyén. Használhatja a Polymer vagy a Angular, vagy használhatja a materializálást.
A materializálás a CSS keretrendszer a Sass támogatással alapuló Material Design elveken alapul a jobb fejlődés érdekében. Az alapértelmezett stílust hordozza az egyszerű használathoz, és részletes dokumentációval rendelkezik.
Sok hasznos összetevőt találhat: párbeszédablak, modális, dátumválasztó, anyaggombok, parallaxis, kártyák és így tovább. Számos navigációs opcióval is rendelkezik, amelyek közül választhat, például a legördülő menüből és a lapokból. A materializálás a 12-rácsos rendszer 3 alapértelmezett képernyőméret média lekérdezés: a 600px maximális szélessége mobil eszköz, 992px tabletta eszköz és több mint 992px asztali eszköz..
Elkezdeni
Kétféle módon lehet elkezdeni a Materialize-t: use szabványos CSS vagy Sass. Mindkét forrás letölthető itt. A következő paranccsal is kaphatja őket:
a fűtőberendezés telepítése megvalósul
Miután megkapta a forrásokat, győződjön meg róla, hogy megfelelően csatolja őket a projektfájlhoz, vagy fordítsa a forrást, ha a Sass verziót használja.
Jellemzők
Ebben a fejezetben néhány olyan funkciót fogok ismertetni, amelyek az ajánlatokat látják el.
1. Sass Mixins
Ez a keret magában foglalja a Sass Mixins-et, amely automatikusan hozzáad minden böngésző előtagot, amikor bizonyos CSS tulajdonságokat ír. Ez egy nagyszerű funkció, amit biztosítani kell kompatibilitás minden böngészőben, a lehető legkisebb felhajtással és kóddal.
Tekintse meg az alábbi animációs tulajdonságokat:
-webkit-animáció: 0.5s; -moz-animáció: 0,5s; -o-animáció: 0,5s; -ms-animáció: 0,5s; animáció: 0,5s;
Ezeket a kódsorokat egy sor Sass mixinnel át lehet írni:
@include animation (.5s);
Körülbelül 19 fő keverék elérhető. A teljes lista megtekintéséhez látogasson el a Sass kategóriába mixinek lap.
2. Áramlás szöveg
Míg a többi frontend keretrendszer rögzített szöveget használ, a materializálás valóban érzékeny szöveget hajt végre. A szövegméret és a vonal magassága is az olvashatóság érdekében fenntartható. Kisebb képernyők esetén a vonal magassága nagyobb lesz.
A Flow Text használatához egyszerűen hozzáadhatja a flow-text osztály a kívánt szövegre. Például:
Ez az áramlási szöveg.
Ellenőrizze a demót itt az áramlási szöveg részben.
3. Ripple hatás a hullámokkal
Az Anyagtervezés interaktív visszajelzést is tartalmaz, az egyik figyelemre méltó példa a ripple hatás. A materializálásban ezt a hatást nevezik Hullámok. Alapvetően, ha a felhasználók rákattintanak, vagy megérintik a / gombokat, kártyákat vagy bármely más elemet, a hatás megjelenik. A hullámok könnyen létrehozhatók hozzáadásával hullámok-hatás osztályt az elemekre.
Ez a részlet mutatja a hullámok hatását.
beküldése
A hullámok alapértelmezés szerint szürkeek. De olyan helyzetben, ahol sötét színű háttér van, módosíthatja a színt. Más szín hozzáadásához csak add hozzá waves- (szín) az elemhez. Cserélje ki a "(szín)" nevet egy szín nevével.
beküldése
7 szín közül választhat: világos, piros, sárga, narancs, lila, zöld és réce. Mindig létrehozhatja vagy testre szabhatja saját színeit, ha ezek a színek nem felelnek meg az Ön igényeinek.
4. Árnyék
Az elemek közötti kapcsolat biztosítása érdekében az Anyagtervezés javasolja a felületek emelését. Az elképzelés ennek az elvnek a megvalósításával jár Z-depth- (szám) osztály. Az árnyék mélységét a (szám) 1-től 5-ig történő módosításával határozhatja meg:
Árnyék mélysége 3
Minden árnyékmélység az alábbi képpel látható.
5. Gombok és ikonok
Anyagtervezésben három fő gombtípus van: felemelt gomb, fab (lebegő művelet gomb) és lapos gomb.
(1) Emelt gomb
A felemelt gomb az alapértelmezett gomb. A gomb létrehozásához csak adjunk hozzá egy BTN osztályt az elemekhez. Ha rákattintva vagy megnyomva szeretné megadni a hullámhatást, menjen a következővel:
Gomb
Másik lehetőségként megadhatja a gombot egy ikonra a szöveg bal vagy jobb oldalán. Az ikonhoz hozzá kell adnia az egyéni beállításokat címke az osztályosztály nevével és pozíciójával. Például:
Letöltés
A fenti töredékben használjuk MDI-file-file-letöltés osztály a letöltés ikonjára. Körülbelül 740 különböző ikon Te tudod használni. Ha látni szeretné, hogy a fejek a Sass oldalra kerüljenek az Ikonok lapon.
(2) Úszó gomb
A csatolással úszó gomb hozható létre BTN-lebegő osztály és a kívánt ikon. Például:
Az anyagtervezésben a lapos gombot gyakran használják a párbeszédpanelen. Létrehozásához csak add BTN-sík az eleméhez hasonlóan:
Hanyatlás
Ezenkívül a gombok kikapcsolhatók a Tiltva osztályban, és nagyobb felhasználású BTN-nagy osztály.
6. Rács
A materializálás szabványt használ 12 oszlopos rács rendszer. A válaszkészség három részre oszlik: kicsi (k) mobil, közepes (m) tabletta és nagy (l) az asztalhoz.
Oszlopok létrehozásához használja a s, m vagy l billentyűkombinációt, majd a rácsszámot. Például, ha egy félméretű elrendezést szeretne létrehozni a mobileszközhöz, akkor a következőket kell tartalmaznia: s6 az osztályba. s6 jelentése Kis-6 ami kis oszlopon 6 oszlopot jelent.
Tartalmaznia kell a col osztályt a létrehozott elrendezésben, és helyezze el egy olyan elembe, amely a sor osztály. Ez így van úgy, hogy az elrendezést az oszlopokba helyesen be lehet helyezni. Íme egy példa:
Itt 12 oszlop vagy teljes szélesség van4 oszlop (egyharmad) itt4 oszlop (egyharmad) itt4 oszlop (egyharmad) itt
Íme az eredmények:
Alapértelmezés szerint, col s12 fix méretű, és minden képernyőmérethez optimalizálva van, alapvetően ugyanaz, mint a col s12 m12 l12. De ha meg szeretné adni a különböző eszközök oszlopainak méretét. Mindössze annyit kell tennie, hogy felsorolja a további méreteket:
A szélességem mindig 12 oszlopot tartalmaz mindenhol12 oszlopom van mobilon, 6 táblán és 9 az asztalon
Ez az, ami ez a következő:
Ezek csak néhány funkciót jelentenek a materializálásban. Ha többet szeretne megtudni más funkcióiról, menjen a dokumentációs oldalra.
