Materializovať - materiálový návrh CSS rámca
Google je Materiálový dizajn je určená na to, aby fungovala dobre na webe aj v mobilných aplikáciách. Získate popularitu s vývojármi a ak chcete prijať aj to, existuje veľa spôsobov, ako realizovať materiálový dizajn na vašich stránkach. Môžete použiť polymér alebo uhlové, alebo môžete použiť materializovať.
Materialize je a CSS rámec založený na zásadách návrhu materiálu s podporou Sass pre lepší rozvoj. Obsahuje predvolený styl pre jednoduché použitie a má podrobnú dokumentáciu.
Nájdete tu veľa užitočných komponentov: dialógové, modálne, výberové, materiálové tlačidlá, paralaxy, karty a ďalšie. Má tiež veľa navigačných možností, z ktorých si môžete vybrať, napríklad rozbaľovacie menu, posúvanie menu a karty. Materialize tiež používa a 12-gridový systém s 3 predvolenými veľkosťami mediálnych dopytov: maximálna šírka 600 pixlov je mobilné zariadenie, tabletové zariadenie s veľkosťou 992 pixlov a viac ako 992 pixlov je považované za stolné zariadenie.
Začíname
Existujú dva spôsoby, ako začať s materiálom: použitie štandardné CSS alebo Sass. Oba zdroje si môžete stiahnuť tu. Môžete si ich tiež získať s bower pomocou nasledujúceho príkazu:
bower install sa materialize
Po získaní zdrojov sa uistite, že ste ich správne prepojili s projektovým súborom alebo zostavili zdroj, ak používate verziu Sass.
Vlastnosti
V tejto časti budem vysvetľovať niektoré funkcie, ktoré Materialize ponúka.
1. Sass Mixins
Tento rámec nesie Sass Mixins, ktorý pri pridávaní určitých vlastností CSS automaticky pridá všetky predpony prehliadača. Je to skvelá funkcia, ktorú musíte zaistiť kompatibilitu vo všetkých prehliadačoch, s čo najmenším zmätkom a kódom, ako je to možné.
Pozrite sa na nasledujúce vlastnosti animácie:
-webkit-animácia: 0,5s; -moz animácia: 0,5s; -o-animácia: 0,5s; -ms-animácia: 0,5s; animácia: 0,5s;
Tieto riadky kódu môžu byť prepísané jedným riadkom Sass mixin tak, ako je to:
@ zahŕňa animáciu (.5s);
Je tu asi 19 hlavných mixov k dispozícii. Ak chcete zobraziť úplný zoznam, prejdite do kategórie Sass v sekcii MIXINS pútko.
2. Tok textu
Zatiaľ čo iné rámce frontend používajú fixný text, Materialize implementuje skutočne citlivý text. Veľkosť textu a výška riadku sú tiež prispôsobené na zachovanie čitateľnosti. Pokiaľ ide o menšie obrazovky, výška línie je zmenšená.
Ak chcete použiť Flow Text, môžete jednoducho pridať flow-Text triedu na požadovaný text. Napríklad:
Toto je textový text.
Pokúste sa o demo tu v sekcii Tok textu.
3. Zvlnenie efekt s vlnami
Materiálový dizajn má tiež interaktívnu spätnú väzbu, jeden pozoruhodný príklad je zvlnenie. V materialise sa tento efekt nazýva vlny. V podstate, keď používatelia kliknú alebo klepnú / sa dotknú tlačidla, karty alebo akéhokoľvek iného prvku, efekt sa zobrazí. Vlny možno ľahko vytvoriť pridaním vlny efekt triedy na svoje prvky.
Tento úryvok vám prináša efekt vlny.
Predložiť
Vlny sú štandardne šedé. Ale v situácii, keď máte tmavé farebné pozadie, možno budete chcieť zmeniť farbu. Ak chcete pridať inú farbu, stačí ju pridať waves- (color) k prvku. Nahraďte "(farbu)" názvom farby.
Predložiť
Môžete si vybrať zo 7 farieb: svetlo, červená, žltá, oranžová, fialová, zelená a teal. Vždy môžete vytvoriť alebo prispôsobiť svoje vlastné farby, ak tieto farby nezodpovedajú vašim potrebám.
4. Shadow
Na vytvorenie vzťahov medzi prvkami odporúčame materiálové prevedenie na povrchy. Materialize prináša tento princíp svojim z-depth- (číslo) trieda. Hĺbku tieňov môžete určiť zmenou (čísla) z 1 na 5:
Hĺbka tieňa 3
Všetky hĺbky tieňa sú demonštrované s obrázkom uvedeným nižšie.
5. Tlačidlá a ikony
V materiálnom dizajne existujú tri hlavné typy tlačidiel: zvýšené tlačidlo, fab (tlačidlo s pohyblivou akciou) a ploché tlačidlo.
(1) Zvýšené tlačidlo
Zvýšené tlačidlo je predvolené tlačidlo. Ak chcete vytvoriť toto tlačidlo, stačí pridať a btn triedy na svoje prvky. Ak chcete, aby ste naň klikli alebo stlačili, prejdite takto:
gombík
Môžete tiež dať tlačidlu ikonu vľavo alebo napravo od textu. Pre túto ikonu budete musieť pridať vlastné označte názov triedy ikony a pozíciu. Napríklad:
Stiahnuť ▼
Vo vyššie uvedenom úryvku používame MDI-file-file-download trieda pre ikonu sťahovania. Je tu asi 740 rôznych ikon môžeš použiť. Ak ich chcete vidieť, prejdite na stránku Sass na karte Ikony.
(2) Plávajúce tlačidlo
Plávacie tlačidlo sa dá vytvoriť pripojením btn plávajúce triedy a požadovanej ikony. Napríklad:
Pri návrhu materiálu sa často používa ploché tlačidlo v dialógovom okne. Ak chcete vytvoriť, stačí pridať btn ploché na svoj prvok takto:
pokles
Okrem toho môžete tlačidlá vypnúť pomocou tlačidla invalidný triedu a väčšie použitie btn-veľké trieda.
6. Mriežka
Materialize používa štandard 12-stĺpca citlivej mriežky Systém. Odozva je rozdelená na tri časti: malé (malé) pre mobilné, stredné (m) pre tablety a tablety veľká (l) pre pracovnú plochu.
Ak chcete vytvoriť stĺpce, použite s, m alebo l na označenie veľkosti, po ktorej nasleduje číslo mriežky. Ak napríklad chcete vytvoriť polovičný rozloženie pre mobilné zariadenie, mali by ste ho zahrnúť s6 triedy do vášho rozloženia. s6 znamenať malý-6 čo znamená 6 stĺpcov na malom zariadení.
Musíte tiež zahrnúť col triedy v usporiadaní, ktorú vytvoríte, a vložte ho do prvku, ktorý má riadok trieda. Je to tak, aby rozloženie bolo možné vložiť do stĺpcov správne. Tu je príklad:
Mám tu 12 stĺpcov alebo celú šírku4 stĺpce (jedna tretina) tu4 stĺpce (jedna tretina) tu4 stĺpce (jedna tretina) tu
Tu sú výsledky:
Predvolene, col s12 je pevná veľkosť a optimalizovaná pre všetky veľkosti obrazovky, v podstate rovnaké ako col s12 m12 l12. Ak však chcete určiť veľkosť stĺpcov pre rôzne zariadenia. Jediné, čo musíte urobiť, je vymenovať ďalšie veľkosti, ako napríklad:
Moja šírka má vždy vždy 12 stĺpcovMám 12 stĺpcov v mobile, 6 na tablete a 9 na pracovnej ploche
Tu je to, ako to vyzerá takto:
To sú len niektoré vlastnosti Materialise. Ak sa chcete dozvedieť viac o ďalších funkciách, prejdite na stránku dokumentácie.
