Водич за почетнике о томе како да стилски креће апликацију Иониц 2 за мобилне уређаје

Хеј момци! У овом посту ћу вас корак по корак провести кроз крајње основе о томе како стилизовати Иониц 2 апликацију помоћу СЦСС.

Да бисте се максимално искористили за овај корак, било би добро имати претходно знање о ЦСС-у и јонију, али није неопходно. Ако нисте упознати са оквиром Иониц 2, предлажем вам да погледате документацију о Иониц 2.

Упутство за употребу

Иониц 2 доноси много ствари на сто (Ако не кренете са потпуно празне скеле). Добијате апликацију, која је прилично већ стилизована. Али ако желите да га промените, постаје мало комплицирано ако сте почетник.

Да бисмо инсталирали потребне додатке, морамо да започнемо рад са Иониц-ом, морамо преузети и инсталирати НодеЈС. Након тога можете инсталирати Цордова и Иониц са вашег терминала покретањем ове наредбе:

$ нпм инсталирајте -г ионска кордова

Такође ћемо морати да инсталирамо Типесцрипт, што је језик са којим је изграђен Иониц 2. Покрените ову наредбу:

$ нпм инсталл -г типецрипт

Да би се овај детаљни фокус усредсредио на стилинг, користићемо унапред направљену апликацију са основним дизајном.

Скенирајте апликацију Иониц 2 картица покретањем ове наредбе у вашем терминалу:

$ иониц старт миТабс картице --в2

Добићете апликацију са картицама тако да можете да се крећете између различитих приказа. Можете да га тестирате у претраживачу тако што ћете га уписати у терминал!

$ јонска сервирање
Као што видите, Иониц прилагођава различите компоненте за сваку платформу. У наставку ћу детаљније описати како да урадите дизајн специфичан за платформу. Такође добијате сет стандардних тематских боја и изгледа прилично опћенито.

Промените тему боја с $ бојама

Отворите апликацију у уређивачу текста. (Користим ВебСторм ИДЕ од Јетбраинс бтв)

Затим започните навигацијом до ове датотеке:

срц / тема / променљиве.сцсс

Овде можете видети да је тема боја апликације постављена у променљивој која се зове $ боје, а ове кључеве / вредности можете да мењате колико год желите, чак додате нове.

Да бисте показали како то функционише, једноставно замените шестерокутну боју на примарној са, на пример, „црвеном“.

То ће резултирати овим:

Све компоненте које користе примарну боју сада су постављене на примарну боју, која је црвена.

Ове боје лако можете користити у било којој компоненти. Сада ћу вам показати како то можете учинити!

Навигација до ове датотеке:

срц / пагес / хоме / хоме.сцсс

У ову датотеку смо додали СЦСС специфични за страницу, што значи да ће се овде наведени стилови применити само на почетну страницу.

Променићемо боју текста х2 „Добродошли у Јони!“ У примарну боју (црвену). Да бисмо то учинили, морамо додати ознаку х2 у почетну страницу и пребрисати боју за мапирање ($ боје, примарно). Ово ће дохватити променљиве $ боје и вредност кључа „примарно“.

То је резултат тога:

Боја х2 је сада такође црвена! Успех у мисији!

Као што сте сада схватили да можете да користите и било који од тастера у вашој $ варијабли. Покушајте да се мало поиграте, чак и додајте неке нове!

Употреба $ боја је добар начин да пратите све боје у апликацији. Можете истовремено да промените боје огромног комада елемената. Уместо да морате зумирати све различите компоненте и ручно мењати боје, као што бисте то морали да урадите ако не користите СЦСС.

Превладавајуће јонске променљиве

У „срц / топиц / вариаблес.сцсс“ можете променити пуно јонски унапред направљених дизајна. На пример, желимо да променимо боју алатне траке коју је иониц дизајнирао за нас. Можемо се кретати до документације Иониц 2 и тражити „алатну траку“. Ако се мало помакнете према доље наћи ћете „позадину са алаткама“, ово нам је потребно. Овде можете видети да је задана боја теме постављена на "# ф8ф8ф8".

Променићемо боју ове алатне траке у нашу основну боју. Дођите до датотеке „варијабли.сцсс“ и додајте ово:

$ тоолбар-бацкгроунд: мап-гет ($ боје, примарно);

и воила, све позадине траке са алаткама у вашој апликацији постаће наша основна боја, коју смо претходно поставили на црвену!

Хм, али шта ако мислите да је алатна трака премала? И желите да повећате висину? То можете учинити на врло сличан начин!

Идите на страницу Замјењиве варијабле у документацији Иониц 2 и потражите висину траке са алатима.

на дну можете видети $ тоолбар-иос-хеигхт, $ тоолбар-мд-хеигхт и $ тоолбар-вп-хеигхт. Ово су различите траке са алаткама за све три платформе за које развијате! иос = Ипхоне, мд = Андроид и вп = Виндовс Пхоне. Да бисте га тестирали, одаберите иОС алатну траку и ставите је у „променљив.сцсс“ и једноставно јој поставите нову вредност, овако:

То ће резултирати овим:

Као што видите, алатна трака на иОС-у је сада огромна. Слободно експериментишите са тим и покушајте да пронађете више компоненти на којима можете надјачати стил. Ако не знате име компоненте коју тражите, можете десним тастером миша кликнути на компоненту у претраживачу и потражити назив класе компоненте, а затим то користити за претраживање у документацији Иониц 2!

Такође можете да погледате у гитуб репо-у Иониц 2 за различите компоненте и видите које променљиве имају.

Искористите прилагођени дизајн специфичан за платформу

С обзиром да истовремено развијате апликацију за три платформе, од пресудног је значаја да своје компоненте можете прилагодити за сваку од њих засебно. Мислим, дизајн материјала не функционира баш добро у иОС-у.

Да бисмо то показали, променићемо боју текста <п> на иОС платформи.

Навигација до ове датотеке:

срц / апп / апп.сцсс

Овде можете додати глобалне СЦСС променљиве. Значи да ће се овде наведени стилови применити на целу апликацију.

Да бисте унели „<п>“ текст на иОС зеленој боји, једноставно додајте овај СЦСС у ту датотеку:

.иос {
  п {
    боја: зелена;
  }
}

То ће резултирати овим! :)

Мислим да је ово лако једна од најцењенијих карактеристика стила коју Иониц 2 доноси.

Ово је врло једноставан пример како се то ради. Али ако замислите могућности! У основи можете да направите једну апликацију и изгледате супер нативно и другачије на свакој платформи. Анимације с гумбима вјероватно би требале бити различите за сваку платформу како би се подударале са изворним анимацијама, зар не? Надам се да сте схватили колико времена штедите радећи ово уместо развијања три различите матичне апликације.

Завршићу овде свој корак и препуштам вам се! Покушајте да се играте около колико можете и има много више да научите о Иониц-у 2. Управо сам описао основе стајлинга.

Али запамтите, када схватите како то све урадити, моћи ћете комбиновати све ствари да створите заиста добре апликације!

У будућности ћу радити сличне постове о другим аспектима Иониц 2 оквира, као што су конзумирање Апијевих, Е2Е тестирања и других забавних ствари.

Резултат овог приручника сам гурнуо у мој Гитхуб ако желите да га проверите!

Видимо се ускоро!