Vodič za početnike o tome kako oblikovati aplikaciju Ionic 2 Mobile

Bok ljudi! U ovom postu ću vas korak po korak provesti kroz krajnje osnove o tome kako stilizirati aplikaciju Ionic 2 pomoću SCSS-a.

Da biste se maksimalno iskoristili za ovaj korak, bilo bi dobro imati neko prethodno znanje o CSS-u i ioniku, ali nije nužno. Ako niste upoznati s okvirom Ionic 2, predlažem da pogledate dokumentaciju Ionic 2.

Prolazni vodič

Ionic 2 donosi puno stvari na stol (ako ne krenete s potpuno prazne skele). Dobivate aplikaciju, a ona je prilično već stilizirana. Ali ako želite napraviti promjene, to postaje malo škakljivo ako ste početnik.

Da bismo instalirali potrebne dodatke moramo započeti rad s Ionic-om, trebamo preuzeti i instalirati NodeJS. Nakon toga možete instalirati Cordova i Ionic sa vašeg terminala pokretanjem ove naredbe:

$ npm instalirajte -g ionska kordova

Također ćemo trebati instalirati Typescript, a to je jezik na kojem je izgrađen Ionic 2. Pokrenite ovu naredbu:

$ npm install -g typecript

Da bismo se ovaj prolazni fokus usredotočio uglavnom na styling, upotrijebit ćemo unaprijed napravljenu aplikaciju s osnovnim dizajnom.

Skenirajte karticu Ionic 2 kartica pokretanjem ove naredbe u vašem terminalu:

$ ionski start myTabs kartice --v2

Dobit ćete aplikaciju s karticama kako biste se mogli kretati između različitih pogleda. Možete ga isprobati u pregledniku tako da ga upišete u terminal!

$ ionska služba
Kao što vidite, Ionic prilagođava različite komponente za svaku platformu. U nastavku ću detaljnije opisati kako napraviti specifičan dizajn platforme. Dobijate i skup standardnih tematskih boja i to izgleda prilično općenito.

Promijenite temu boja s $ bojama

Otvorite aplikaciju u uređivaču teksta. (Koristim WebStorm IDE by Jetbrains btw)

Zatim počnite navigacijom do ove datoteke:

src / tema / variables.scss

Ovdje možete vidjeti da je tema boja aplikacije postavljena u varijabli zvanoj $ boje, te ključeve / vrijednosti možete urediti koliko želite, čak dodati nove.

Da bismo vam pokazali kako funkcionira, jednostavno zamijenite šesterokutnu boju na primarnoj s, na primjer, "crvenom".

To će rezultirati ovim:

Sve komponente koje koriste primarnu boju sada su postavljene na osnovnu boju koja je crvena.

Te boje možete lako koristiti u bilo kojoj komponenti. Sada ću vam pokazati kako to možete učiniti!

Dođite do ove datoteke:

src / stranice / home / home.scss

U ovu datoteku dodamo SCSS specifičan za stranicu, što znači da će se ovdje navedeni stilovi primijeniti samo na početnu stranicu.

Promijenit ćemo boju teksta h2 "Dobrodošli u Ionic!" U primarnu boju (crvenu). Da bismo to učinili, moramo dodati oznaku h2 u početnu stranicu i prebrisati boju za mapiranje ($ boje, primarno). To će dohvatiti varijabilne $ boje i vrijednost ključa "primarno".

To je rezultat toga:

Boja h2 je sada također crvena! Uspjeh u misiji!

Kao što ste možda shvatili da možete koristiti bilo koji tipku u vašoj varijabli $ boja. Pokušajte se malo igrati s njim, čak dodajte neke nove!

Korištenje $ boja dobar je način za praćenje svih boja u aplikaciji. Možete istovremeno promijeniti boje ogromnog komada elemenata. Umjesto da uvećate sve različite komponente i ručno promijenite boje, kao što biste to učinili ako ne upotrebljavate SCSS.

Nadmoćne jonske varijable

U "src / tema / varijabli.scss" možete mijenjati puno ionskih unaprijed izrađenih dizajna. Na primjer, želimo promijeniti boju alatne trake koju je ionic dizajnirao za nas. Možemo se kretati do dokumentacije Ionic 2 i tražiti "alatnu traku". Ako se malo pomaknete prema dolje naći ćete "pozadinu alatne trake", ovo nam treba. Ovdje možete vidjeti da je zadana boja teme postavljena na "# f8f8f8".

Promijenit ćemo boju ove alatne trake u našu primarnu boju. Dođite do datoteke "varijabli.scss" i dodajte ovo:

$ toolbar background: pozicija karte ($ boje, primarno);

i voila, sve vaše pozadine alatnih traka u vašoj aplikaciji postat će naša osnovna boja koju smo prethodno postavili na crvenu!

Hm, ali što ako mislite da je alatna traka premala? I želite povećati visinu? To možete učiniti na vrlo sličan način!

Idite na stranicu Zamjenjive varijable u dokumentaciji Ionic 2 i potražite visinu alatne trake.

na dnu možete vidjeti $ toolbar-ios-height, $ toolbar-md-height i $ toolbar-wp-height. Ovo su različite alatne trake za sve tri platforme za koje razvijate! ios = Iphone, md = Android i wp = Windows Phone. Da biste ga testirali, odaberite iOS alatnu traku i stavite je u "varijablu.scss" i jednostavno joj postavite novu vrijednost, poput ove:

To će rezultirati ovim:

Kao što vidite, alatna traka na iOS-u sada je ogromna. Slobodno eksperimentirajte s tim i pokušajte pronaći više komponenti nad kojima možete nadjačati stil. Ako ne znate ime komponente koju tražite, možete desnom tipkom miša kliknuti komponentu u pregledniku i potražiti naziv klase komponente, a zatim je koristiti za pretraživanje u dokumentaciji Ionic 2!

Možete i zaviriti u Github repo Ionic 2 za različite komponente i vidjeti koje varijable imaju.

Iskoristite prilagođeni dizajn specifičan za platformu

Budući da istovremeno razvijate aplikaciju za tri platforme, vrlo je važno da svoje komponente možete prilagoditi za svaku od njih zasebno. Mislim, materijalni dizajn ne radi baš dobro u iOS-u.

Da bismo to pokazali, promijenit ćemo boju teksta

na iOS platformi.

Dođite do ove datoteke:

src / aplikacija / app.scss

Ovdje možete dodati globalne SCSS varijable. Znači da će se ovdje navedeni stilovi primijeniti na čitavu aplikaciju.

Da biste tekst "

" na iOS-u učinili zelenim, jednostavno dodajte ovaj SCSS u tu datoteku:

.ios {
  p {
    boja: zelena;
  }
}

To će rezultirati ovim! :)

Mislim da je ovo lako jedna od najcjenjenijih stilskih značajki koje Ionic 2 donosi.

Ovo je vrlo jednostavan primjer kako to učiniti. Ali ako zamislite mogućnosti! U osnovi možete sastaviti jednu aplikaciju i učiniti da ona izgleda super nativno i drugačije na svakoj platformi. Animacije s gumbima vjerojatno bi trebale biti različite za svaku platformu kako bi se podudarala s izvornim animacijama, zar ne? Nadam se da ste shvatili koliko vremena štedite radeći to umjesto da razvijate tri različite domaće aplikacije.

Završit ću ovdje svoj korak i prepustiti vam se! Pokušajte se igrati oko sebe koliko god možete, a tu je i puno više toga za naučiti o Ionic-u 2. ​​Upravo sam opisao osnove stylinga.

Ali zapamtite, kada shvatite kako se sve to događa, moći ćete kombinirati sve stvari za stvaranje doista dobrih aplikacija!

U budućnosti ću raditi slične postove o drugim aspektima Ionic 2 okvira, poput konzumiranja Apijevih, E2E testiranja i ostalih zabavnih stvari.

Rezultat ovog priručnika gurnuo sam u svoj Github ako ga želite provjeriti!

Vidimo se uskoro!