Un ghid pentru începători cu privire la modul de stil al unei aplicații mobile Ionic 2

Bună băieți! În această postare vă voi parcurge pas cu pas prin elementele de bază extreme despre cum să stilați o aplicație Ionic 2 folosind SCSS.

Pentru a profita la maximum de acest pas, ar fi bine să aveți cunoștințe prealabile despre CSS și Ionic, dar nu este necesar. Dacă nu sunteți familiarizat cu cadrul Ionic 2, vă recomand să consultați documentația Ionic 2.

Călătoria

Ionic 2 aduce o mulțime de lucruri pe masă (Dacă nu pornești de la o schela complet goală). Aveți o aplicație și este deja stilată. Dar dacă vrei să faci modificări, devine puțin complicat dacă ești începător.

Pentru a instala pluginurile necesare, trebuie să începem să lucrăm cu Ionic, trebuie să descărcăm și să instalăm NodeJS. După aceea, puteți instala Cordova și Ionic de la terminalul dvs. rulând această comandă:

$ npm instalare -g ionica cordova

De asemenea, va trebui să instalăm Typescript, care este limbajul cu care se construiește Ionic 2. Executați această comandă:

$ npm install -g typecript

Pentru a face acest pas orientat în principal pe stil, vom folosi o aplicație pre-realizată cu un design de bază.

Schelați o aplicație Ionic cu 2 file, executând această comandă în terminalul dvs.:

$ ionic filele start myTabs - v2

Veți obține o aplicație cu file pentru a putea naviga între diferite vizualizări. Îl poți testa în browser, tastând acest lucru în terminalul tău!

$ ionica servire
După cum vedeți, Ionic personalizează diferitele componente pentru fiecare platformă. Voi acoperi mai multe despre cum se face designul specific platformei de mai jos. De asemenea, primiți un set de culori standard cu temă și arată destul de generic.

Schimbați tema culorii cu $ culori

Deschide aplicația într-un editor de text. (Eu folosesc WebStorm IDE de Jetbrains btw)

Apoi începeți navigând către acest fișier:

src / tema / variables.scss

Aici puteți vedea că tema de culoare a aplicației este setată într-o variabilă numită $ culori, aceste chei / valori pe care le puteți edita oricât doriți, chiar adăugați altele noi.

Pentru a vă arăta cum funcționează, pur și simplu înlocuiți culoarea hexagonală pe elementul primar cu de exemplu „roșu”.

Va rezulta astfel:

Toate componentele care utilizează culoarea primară sunt acum setate pe culoarea primară, care este roșie.

Puteți utiliza cu ușurință aceste culori în orice componentă. Vă voi arăta acum cum puteți face asta!

Accesați acest fișier:

src / pagini / home / home.scss

În acest fișier adăugăm SCSS specific paginii, ceea ce înseamnă că stilurile pe care le adăugați aici vor fi aplicate doar pe pagina principală.

Vom schimba culoarea textului h2 „Bine ați venit la Ionic!” La culoarea primară (roșu). Pentru a face acest lucru, trebuie să adăugăm eticheta h2 la pagina de acasă și să înlocuim culoarea pe hartă-get ($ culori, primare). Aceasta va aduce variabila $ culori și valoarea cheii „primare”.

Acesta este rezultatul că:

Culoarea h2 este acum și roșie! Msiune indeplinită!

După cum v-ați dat seama acum, puteți utiliza și oricare dintre tastele din variabila dvs. de culori $. Încercați să vă jucați puțin cu ea, adăugați chiar și altele noi!

Utilizarea culorilor $ este o modalitate bună de a urmări toate culorile din aplicație. Puteți schimba în același timp culorile unei bucăți imense de elemente. În loc să vă apropiați de toate componentele diferite și să schimbați culorile manual, așa cum ar trebui să faceți dacă nu utilizați SCSS.

Variabilele ionice suprapuse

În „src / theme / variables.scss” puteți schimba o mulțime de modele pre-realizate de Ionics. De exemplu, dorim să schimbăm culoarea barei de instrumente proiectată de ionic pentru noi. Putem naviga în documentația Ionic 2 și putem căuta „bara de instrumente”. Dacă derulați un pic în jos găsiți „fundal de bare de instrumente”, acesta este ceea ce avem nevoie. Aici puteți vedea că culoarea implicită a temei este setată pe „# f8f8f8”.

Vom schimba culoarea acestei bare de instrumente în culoarea noastră principală. Accesați fișierul dvs. „variables.scss” și adăugați acest lucru:

$ toolbar-background: map-get ($ culori, primar);

și voilă, toate fundalurile dvs. de bare de instrumente din aplicația dvs. vor deveni culoarea noastră principală, pe care am setat-o ​​anterior pe roșu!

Hm, dar ce se întâmplă dacă crezi că bara de instrumente este prea mică? Și doriți să creșteți înălțimea? Puteți face asta într-un mod foarte similar!

Accesați pagina Variante suprapuse din documentația Ionic 2 și căutați înălțimea barei de instrumente.

în partea de jos puteți vedea $ toolbar-ios-height, $ toolbar-md-height și $ toolbar-wp-înălțime. Aceasta este bara de instrumente diferită pentru toate cele trei platforme pentru care vă dezvoltați! ios = Iphone, md = Android și wp = Windows Phone. Pentru a o testa, alegeți bara de instrumente iOS și așezați-o în „variable.scss” și setați pur și simplu o nouă valoare, astfel:

Aceasta va avea ca rezultat:

După cum puteți vedea, bara de instrumente de pe iOS este acum imensă. Simțiți-vă liber să experimentați acest lucru și să încercați să găsiți mai multe componente pe care să le puteți da peste stil. Dacă nu știți numele componentei pe care o căutați, puteți să faceți clic dreapta pe componenta din browser și să căutați numele clasei componentei, apoi să o utilizați pentru a căuta în documentația Ionic 2!

De asemenea, puteți să vă învârtiți în github repo pentru Ionic 2 pentru diferitele componente și să vedeți ce variabile au.

Utilizați designul specific platformei personalizate

Întrucât dezvoltați o aplicație pentru trei platforme în același timp, este esențial să vă puteți personaliza componentele pentru fiecare și una dintre ele separat. Adică, designul materialului nu funcționează foarte bine în iOS.

Pentru a demonstra acest lucru, vom schimba culoarea textului

​​de pe platforma iOS.

Accesați acest fișier:

src / app / app.scss

Aici puteți adăuga variabile SCSS globale. În sensul că stilurile pe care le puneți aici vor fi aplicate întregii aplicații.

Pentru a face textul „

” pe iOS-ul verde, pur și simplu adăugați acest SCSS la acel fișier:

.ios {
  p {
    culoare: verde;
  }
}

Astfel va rezulta asta! :)

Cred că aceasta este cu ușurință una dintre cele mai valoroase caracteristici de stil pe care le aduce Ionic 2.

Acesta este un exemplu foarte simplu despre cum faci acest lucru. Dar dacă vă imaginați posibilitățile! Puteți construi practic o singură aplicație și să o faceți să pară super nativă și diferită pe fiecare platformă. Animațiile cu butoane ar trebui probabil să fie diferite pentru fiecare platformă pentru a se potrivi cu animațiile native, nu? Sper să înțelegeți cât timp economisiți făcând acest lucru în loc să dezvoltați trei aplicații native diferite.

Voi încheia pasul meu aici și vă voi lăsa la ea! Încercați să vă jucați cât puteți și există multe alte lucruri pentru a afla despre Ionic 2. Tocmai am abordat elementele de bază ale stilului.

Amintiți-vă însă, când veți înțelege cum să faceți toate acestea, veți putea combina toate lucrurile pentru a crea aplicații cu aspect foarte bun!

Voi face postări similare în viitor despre alte aspecte ale cadrului Ionic 2, cum ar fi cum să consum Api, testarea E2E și alte lucruri distractive.

Am împins rezultatul acestui progres către Github-ul meu, dacă vrei să-l verifici!

Ne vedem în curând!