Материјал - ЦСС оквир дизајна материјала
Гоогле Материал Десигн има за циљ да добро функционише на Вебу и на мобилним апликацијама. Добија популарност код програмера и ако желите да га усвојите, постоји много начина за имплементацију материјала Десигн на вашој веб-локацији. Можете користити Полимер или Ангулар, или можете користити Материализе.
Материјал је а ЦСС оквир заснован на принципима дизајна материјала са Сасс подршком за бољи развој. Носи подразумевани стил за лако коришћење и има детаљну документацију.
Можете пронаћи много корисних компоненти у оквиру: дијалога, модала, бирача датума, дугмади материјала, паралаксе, картица и још много тога. Такође има много опција за навигацију од којих можете бирати, као што су падајући мени, слајд у менију и картицама. Материјал се такође користи а 12-грид систем са 3 подразумевана медија упита за медије: максимална ширина 600пк је мобилни уређај, 992пк таблет уређај и више од 992пк сматра се десктоп уређајем.
Почетак
Постоје два начина да започнете са Материализе: усе стандард ЦСС или Сасс. Оба извора можете преузети овде. Можете их добити и са бовер користећи следећу команду:
бове инсталирати материјализирати
Када добијете изворе, обавезно их повежите на пројектној датотеци или компајлирајте извор ако користите Сасс верзију.
Карактеристике
У овом одељку, објаснићу неке карактеристике које нуди Материализе.
1. Сасс Микинс
Овај оквир преноси Сасс Микинс који аутоматски додаје све префиксе прегледача када напишете одређена својства ЦСС-а. То је сјајна особина коју морате осигурати компатибилност за све прегледаче, са што мање буке и кода, што је више могуће.
Погледајте следећа својства анимације:
-вебкит-анимација: 0.5с; -моз-анимација: 0.5с; -о-анимација: 0.5с; -мс-анимација: 0.5с; анимација: 0.5с;
Те линије кода могу бити преписане са једном линијом Сасс микина на следећи начин:
@инцлуде аниматион (.5с);
Постоји око 19 главних микина на располагању. Да бисте видели целу листу, пређите у Сасс категорију у МИКСИНС таб.
2. Флов Тект
Док други оквири фронтенда користе фиксни текст, Материализе имплементира стварно одговарајући текст. Величина текста и висина линије се такође прилагођавају да би се одржала читљивост. Када се ради о мањим екранима, висина линије се повећава.
Да бисте користили Флов Тект, можете једноставно додати флов-тект класу на жељеном тексту. На пример:
Ово је Флов Тект.
Провјерите демо овдје у одјељку Флов Тект.
3. Риппле ефекат са таласима
Материјални дизајн такође долази са интерактивним повратним информацијама, један од примарних примера је ефекат таласања. У материјалу, овај ефекат се зове Вавес. Углавном када корисници кликну или додирну дугме, картицу или било који други елемент, ефекат се појављује. Валови се могу лако креирати додавањем ваве-еффецт на ваше елементе.
Овај исечак даје ефекат таласа.
прихвати
Уобичајено је да су валови сиви. Али у ситуацији када имате позадину тамне боје, можда желите да промените боју. Да бисте додали другу боју, само додајте таласи- (боја) на елемент. Замените "(цолор)" са именом боје.
прихвати
Можете бирати између 7 боја: светло, црвено, жуто, наранџасто, љубичасто, зелено и теал. Увек можете креирати или прилагодити своје боје ако те боје не одговарају вашим потребама.
4. Схадов
Да би се успоставили односи између елемената, дизајн материјала препоручује коришћење висине на површинама. Материјализам доноси овај принцип са својим з-дубина (број) класа. Дубину сјена можете одредити променом (број) од 1 до 5:
Дубина сјене 3
Све дубине сенки су приказане са сликом испод.
5. Дугмад и иконе
У дизајну материјала постоје три главна типа тастера: подигнуто дугме, фаб (дугме плутајуће акције) и флат буттон.
(1) Подигнуто дугме
Подигнути тастер је подразумевани тастер. Да бисте креирали ово дугме, само додајте бтн класи за ваше елементе. Ако желите да му дате ефекат таласа када сте кликнули или притиснули, идите на ово:
Буттон
Алтернативно, можете и дугмету дати икону са леве или десне стране текста. За икону, морат ћете додати обичај са називом и позицијом класе икона. На пример:
Преузимање
У горе наведеном исјечку користимо мди-филе-филе-довнлоад класе за икону за преузимање. Постоји око 740 различитих икона можете користити. Да бисте их видели, пређите на Сасс страницу на картици Иконе.
(2) Флоатинг Буттон
Плутајући тастер се може креирати додавањем бтн-флоатинг класа и жељена икона. На пример:
У дизајну материјала, равна дугме се често користи у оквиру за дијалог. Да бисте је креирали, само додајте бтн-флат на ваш елемент тако:
Одбити
Осим тога, дугмад се може онемогућити помоћу тастера онемогућен класу и направили већу употребу бтн-ларге класа.
6. Грид
Материализе користи стандард Одговарајућа мрежа са 12 колона систем. Одговорност је подељена на три дела: мали за мобилне, средњи (м) за таблет и велики (л) фор десктоп.
Да бисте креирали колоне, користите с, м или л да бисте означили величину, а затим број мреже. На пример, када желите да направите распоред пола величине за мобилни уређај, требало би да укључите с6 класа у ваш распоред. с6 означава смалл-6 што значи 6 колона на малом уређају.
Морате укључити и цол класа у распореду који креирате и ставите га унутар елемента који има ред класа. Ово је тако да се распоред може правилно ставити у колоне. Ево примера:
Овде имам 12 стубова или пуну ширинуОвде су 4 колоне (једна трећина)Овде су 4 колоне (једна трећина)Овде су 4 колоне (једна трећина)
Ево резултата:
Подразумевано, цол с12 је фиксне величине и оптимизирана за цијелу величину заслона, у основи једнака као и цол с12 м12 л12. Али ако желите да одредите величину колона за различите уређаје. Све што треба да урадите је да наведете додатне величине тако:
Моја ширина увек има 12 колона свудаИмам 12 колона на мобилном, 6 на таблету и 9 на десктопу
Ево како ово изгледа:
То су само неке од карактеристика материјала Материализе. Да бисте сазнали више о другим функцијама, идите на страницу са документацијом.
