Materialize - materiál design CSS Framework
Google Materiálové provedení Cílem práce je dobře pracovat na webu a také na mobilních aplikacích. Získává popularitu u vývojářů a pokud ji chcete také přijmout, existuje mnoho způsobů, jak implementovat Materiálový design na vašich stránkách. Můžete použít Polymer nebo Angular, nebo můžete použít Materialize.
Materializace je CSS framework založený na principech materiálového designu s podporou Sass pro lepší rozvoj. To přináší výchozí styl pro snadné použití a má podrobnou dokumentaci.
Najdete zde mnoho užitečných komponent v rámci: dialogu, modálu, nástroje pro výběr data, tlačítek materiálu, paralaxy, karet a dalších. Má také mnoho možností navigace, ze kterých si můžete vybrat, například rozevírací seznam, posuv v nabídce a karty. Materialize také používá 12-mřížkový systém s 3 výchozími dotazy o velikosti média: maximální šířka 600px je mobilní zařízení, tabletové zařízení 992px a více než 992px je považováno za stolní zařízení.
Začínáme
Existují dva způsoby, jak začít s programem Materialize: use standardní CSS nebo Sass. Oba zdroje si můžete stáhnout zde. Můžete také získat pomocí bower následující příkaz:
instalovat se
Po získání zdrojů se ujistěte, že je správně propojíte s vaším projektovým souborem nebo kompilováte zdroj, pokud používáte verzi Sass.
Funkce
V této části vysvětlím některé funkce, které nabízí Materialize.
1. Sass Mixins
Tento rámec nese Sass Mixins, který automaticky přidává všechny předpony prohlížeče, když píšete určité vlastnosti CSS. Je to skvělá vlastnost, kterou musíte zajistit kompatibilitu napříč všemi prohlížeči, s co nejmenším rozruchem a kódem.
Podívejte se na následující vlastnosti animace:
-webkit-animation: 0,5s; -moz-animace: 0,5s; -o-animace: 0,5s; -ms-animace: 0,5s; animace: 0,5s;
Tyto řádky kódu lze přepsat jedním řádkem mixu Sass:
@ zahrnout animaci (.5s);
Je o tom 19 hlavních mixinů dostupný. Chcete-li zobrazit úplný seznam, přejděte do kategorie Sass v MIXINY kartu.
2. Text toku
Zatímco ostatní rámce frontend používají pevný text, Materialize implementuje skutečně citlivý text. Velikost textu a výška řádku jsou také citlivě upraveny, aby byla zachována čitelnost. Pokud jde o menší obrazovky, výška řádku je větší.
Chcete-li použít Flow Text, můžete jednoduše přidat flow-text třídy na požadovaný text. Například:
Toto je Flow Text.
Poklepejte na demo zde v sekci Flow Text.
3. Ripple efekt s vlnami
Materiál Design také přichází s interaktivní zpětnou vazbu, jeden pozoruhodný příklad je efekt zvlnění. V materializaci se tento efekt nazývá Vlny. V podstatě, když uživatelé kliknou na tlačítko, klepnou na tlačítko, kartu nebo jiný prvek, objeví se efekt. Vlny lze snadno vytvořit přidáním efekt vln třídy na vaše prvky.
Tento úryvek vám dává efekt vln.
Předložit
Vlnky jsou ve výchozím nastavení šedé. Ale v situaci, kdy máte tmavou barvu pozadí, můžete změnit barvu. Chcete-li přidat jinou barvu, přidejte ji vlny - (barva) k prvku. Nahraďte „(barvu)“ názvem barvy.
Předložit
Můžete si vybrat ze 7 barev: světlo, červená, žlutá, oranžová, fialová, zelená a šedozelená. Pokud tyto barvy neodpovídají vašim potřebám, můžete vždy vytvořit nebo přizpůsobit vlastní barvy.
4. Stín
Pro vytvoření vazeb mezi prvky doporučujeme použít návrh materiálu na výšku. Materializace přináší na tomto principu s jeho z-hloubka- (číslo) třída. Můžete určit hloubku stínu změnou (čísla) od 1 do 5:
Hloubka stínu 3
Všechny hloubky stínu jsou znázorněny na obrázku níže.
5. Tlačítka a ikony
V materiálovém designu existují tři typy hlavních tlačítek: zvednuté tlačítko, fab (tlačítko plovoucí akce) a ploché tlačítko.
(1) Zvednuté tlačítko
Výchozí tlačítko je vyvýšené tlačítko. Chcete-li toto tlačítko vytvořit, přidejte a btn třídy. Chcete-li tomuto efektu při kliknutí nebo stisknutí dát efekt vlny, přejděte k tomuto:
Tlačítko
Případně můžete také dát tlačítku ikonu vlevo nebo vpravo od textu. Pro ikonu budete muset přidat vlastní tag s názvem třídy třídy a pozicí. Například:
Stažení
Ve výše uvedeném úryvku používáme mdi-file-file-download třídy pro ikonu stahování. Je o tom 740 různých ikon Můžeš použít. Chcete-li je vidět, přejděte na stránku Sass na kartě Ikony.
(2) Plovoucí tlačítko
Plovoucí tlačítko lze vytvořit přidáním btn-floating třídy a požadované ikony. Například:
V Materiálovém návrhu se v dialogovém okně často používá ploché tlačítko. Chcete-li jej vytvořit, stačí přidat btn-flat k vašemu elementu:
Pokles
Tlačítka lze navíc vypnout pomocí tlačítka zakázáno třídy a větší btn-large třída.
6. Mřížka
Materialize používá standard 12-sloupcová mřížka Systém. Citlivost je rozdělena do tří částí: malý (é) pro mobilní zařízení, střední (m) pro tablety a velký (l) pro desktop.
Chcete-li vytvořit sloupce, použijte tlačítka s, m nebo l k označení velikosti, následované číslem mřížky. Například, pokud chcete vytvořit poloviční velikost rozvržení pro mobilní zařízení, měli byste zahrnout s6 třídy do rozvržení. s6 znamená malý-6 což znamená 6 sloupců na malém zařízení.
Musíte také zahrnout a Col třídy v rozvržení, které vytvoříte a vložíte jej do prvku, který má řádek třída. Je to tak, aby rozvržení mohlo být správně vloženo do sloupců. Zde je příklad:
Mám zde 12 sloupců nebo celou šířkuZde jsou 4 sloupce (jedna třetina)Zde jsou 4 sloupce (jedna třetina)Zde jsou 4 sloupce (jedna třetina)
Zde jsou výsledky:
Ve výchozím stavu, col s12 je pevná a optimalizovaná pro všechny velikosti obrazovky, v podstatě stejná jako col s12 m12 l12. Pokud však chcete určit velikost sloupců pro různá zařízení. Vše, co musíte udělat, je vypsat další velikosti:
Moje šířka má vždy 12 sloupců všudeMám 12 sloupců na mobil, 6 na tabletu a 9 na ploše
Toto vypadá takto:
To je jen několik vlastností Materialize. Chcete-li se dozvědět více o dalších funkcích, přejděte na stránku dokumentace.
