Ръководство за начинаещи за това как да стилизираме мобилно приложение Ionic 2

Хей момчета! В тази публикация ще стъпка по стъпка ще ви разгледам крайните основи за това как да стилизирате приложение Ionic 2, използвайки SCSS.

За да се възползвате максимално от това ръководство, би било добре да имате известни предварителни познания за CSS и Ionic, но не е необходимо. Ако не сте запознати с Ionic 2 рамката, предлагам да разгледате документацията за Ionic 2.

Програмата

Ionic 2 носи много неща на масата (Ако не започвате от напълно празно скеле). Получавате приложение и то е почти вече оформено. Но ако искате да направите промени в него, става малко сложно, ако сте начинаещ.

За да инсталираме необходимите плъгини, трябва да започнем работа с Ionic, трябва да изтеглим и инсталираме NodeJS. След това можете да инсталирате Cordova и Ionic от вашия терминал, като изпълните тази команда:

$ npm инсталирайте -g йонна кордова

Ще трябва да инсталираме и Typescript, който е езикът, с който е изграден Ionic 2. Изпълнете тази команда:

$ npm install -g typecript

За да направим този основен фокус основно върху стилистиката, ще използваме предварително направено приложение с основен дизайн.

Скеле приложение Ionic 2 раздели, като стартирате тази команда във вашия терминал:

$ йонни начални раздели myTabs --v2

Ще получите приложение с раздели, за да можете да се придвижвате между различни изгледи. Можете да го тествате в браузъра, като го въведете във вашия терминал!

$ йонна услуга
Както можете да видите, Ionic персонализира различните компоненти за всяка платформа. Ще разгледам повече за това как да направя дизайн, специфичен за платформата по-долу. Освен това получавате набор от стандартни цветови теми и изглежда доста общо.

Променете цветната тема с $ цветове

Отворете приложението в текстов редактор. (Използвам WebStorm IDE от Jetbrains btw)

След това започнете, като отидете на този файл:

SRC / тема / variables.scss

Тук можете да видите, че цветната тема на приложението е зададена в променлива, наречена $ цветове, тези ключове / стойности можете да редактирате колкото искате, дори да добавяте нови.

За да ви покажем как работи, просто заменете шестнадесетичния цвят на първичен с например „червен“.

Това ще доведе до това:

Всички компоненти, които използват основния цвят, сега са зададени на основния цвят, който е червен.

Можете лесно да използвате тези цветове във всеки компонент. Сега ще ви покажа как можете да направите това!

Навигирайте до този файл:

SRC / страници / Начало / home.scss

В този файл добавяме специфичен за страницата SCSS, което означава, че стиловете, които добавяте тук, ще се прилагат само към началната страница.

Ще променим цвета на h2 текста „Добре дошли в Ionic!“ На основния цвят (червен). За да направим това, трябва да добавим h2 таг към home-page и да отменим цвета на map-get ($ цветове, първичен). Това ще получи променливите $ цветове и стойността на ключа „първичен“.

Това е резултатът от това:

Цветът на h2 сега също е червен! Мисия успех!

Както може би сега разбрахте, можете също да използвате някой от клавишите във вашата променлива $ цветове. Опитайте да си поиграете малко с него, дори добавете някои нови!

Използването на $ цветове е добър начин да следите всички цветове в приложението. Можете да промените цветовете на огромен парче елементи едновременно с лекота. Вместо да се налага да увеличавате мащаба към всички различни компоненти и да променяте цветовете ръчно, както би трябвало да направите, ако не използвате SCSS.

Преобладаващи йонни променливи

В „src / topic / variables.scss“ можете да промените много готови дизайни на Ionics. Например, ние искаме да променим цвета на лентата с инструменти, която ionic е проектирал за нас. Можем да отидем в документацията на Ionic 2 и да потърсим „лентата с инструменти“. Ако превъртите малко надолу, ще намерите „фон от лентата с инструменти“, това е, от което се нуждаем. Тук можете да видите, че цветът на темата по подразбиране е зададен на "# f8f8f8".

Ще променим цвета на тази лента с инструменти на нашия основен цвят. Отворете файла „variables.scss“ и добавете това:

$ toolbar-background: map-get ($ цветове, първичен);

и voila, всичките ви фонове на лентата с инструменти в приложението ви ще станат наш основен цвят, който предварително зададохме на червено!

Хм, но какво ще стане, ако смятате, че лентата с инструменти е твърде малка? И искате да увеличите височината на него? Можете да направите това по много подобен начин!

Отидете на страницата за заменящи се променливи в документацията на Ionic 2 и потърсете височината на лентата с инструменти.

отдолу можете да видите $ toolbar-ios-height, $ toolbar-md-height и $ toolbar-wp-height. Това са различните ленти с инструменти и за трите платформи, за които се разработвате! ios = Iphone, md = Android и wp = Windows Phone. За да го тествате, изберете лентата с инструменти на iOS и го поставете в „varia.scss“ и просто задайте нова стойност на него, като тази:

Това ще доведе до това:

Както можете да видите, лентата с инструменти в iOS вече е огромна. Чувствайте се свободни да експериментирате с това и се опитайте да намерите повече компоненти, върху които можете да отмените стила. Ако не знаете името на компонента, който търсите, можете да щракнете с десния бутон върху компонента в браузъра и да потърсите името на класа на компонента, а след това да го използвате за търсене в документацията на Ionic 2!

Можете също да разгледате в github repo на Ionic 2 за различните компоненти и да видите кои променливи имат.

Използвайте специфичен дизайн на платформата

Тъй като разработвате приложение за три платформи едновременно, важно е да можете да персонализирате вашите компоненти за всеки и един от тях поотделно. Искам да кажа, че материалният дизайн не работи много добре в iOS.

За да демонстрираме това, ще променим цвета на

текста на iOS платформата.

Навигирайте до този файл:

SRC / ап / app.scss

Тук можете да добавите глобални SCSS променливи. Това означава, че стиловете, които поставяте тук, ще бъдат приложени към цялото приложение.

За да направите текста „

“ в iOS зелен, просто добавете този SCSS към този файл:

.ios {
  p {
    цвят: зелен;
  }
}

Това ще доведе до това! :)

Мисля, че това е лесно една от най-ценните функции, които Ionic 2 носи.

Това е много прост пример за това как се прави това. Но ако си представите възможностите! Основно можете да изградите едно приложение и да го направите да изглежда супер родно и различно на всяка платформа. Анимациите на бутоните вероятно трябва да са различни за всяка платформа, за да съответстват на родните анимации, нали? Надявам се да разберете колко време спестявате, правейки това, вместо да разработвате три различни местни приложения.

Ще завърша моето ръководство тук и ще ви оставя на него! Опитайте се да си поиграете колкото можете повече и има много повече неща, за да научите за Ionic 2. Току-що разгледах основите на стайлинга.

Но не забравяйте, че когато разберете как да направите всичко това, ще можете да комбинирате всички неща, за да създадете наистина добре изглеждащи приложения!

В бъдеще ще правя подобни публикации за други аспекти на Ionic 2 рамката, като например как да консумираме Api, тестване на E2E и други забавни неща.

Избутах резултата от това ръководство към моя Github, ако искате да го проверите!

Ще се видим скоро!