Pradedančiųjų vadovas, kaip sukonstruoti „Ionic 2“ programą mobiliesiems

Sveiki vaikinai! Šiame įraše žingsnis po žingsnio aprašysiu pagrindinius pagrindus, kaip formuoti „Ionic 2“ programą naudojant SCSS.

Jei norite maksimaliai išnaudoti šį žingsnį, būtų gerai turėti išankstinių žinių apie CSS ir „Ionic“, tačiau tai nėra būtina. Jei nesate susipažinę su „Ionic 2“, siūlau pasidomėti „Ionic 2“ dokumentacija.

Apžvalga

„Ionic 2“ ant stalo atneša daug daiktų (jei pradedate ne nuo visiškai tuščių pastolių). Gaunate programą, kuri jau yra beveik sukurta. Bet jei norite jį pakeisti, tai tampa šiek tiek sudėtinga, jei esate pradedantysis.

Norėdami įdiegti reikiamus papildinius, turime pradėti dirbti su „Ionic“, todėl turime atsisiųsti ir įdiegti „NodeJS“. Po to galite įdiegti Cordova ir Ionic iš savo terminalo vykdydami šią komandą:

$ npm įdiegti -g joninių kordova

Taip pat turėsime įdiegti „Typescript“, kuria kalba sukurta „Ionic 2“. Vykdykite šią komandą:

$ npm diegti -g mašinraštis

Norėdami sutelkti dėmesį į stilių, mes naudosime iš anksto parengtą programą su pagrindiniu dizainu.

Pastolkite „Ionic 2“ skirtukų programą vykdydami šią komandą savo terminale:

$ joniškai paleiskite „myTabs“ skirtukus --v2

Gausite programą su skirtukais, kad galėtumėte naršyti po skirtingus rodinius. Galite tai išbandyti naršyklėje įvesdami tai savo terminale!

$ jonų tarnauti
Kaip matote, joninis individualizuoja skirtingus kiekvienos platformos komponentus. Žemiau aptarsiu, kaip atlikti konkrečios platformos dizainą. Taip pat gausite standartinių teminių spalvų rinkinį ir jis atrodo gana bendras.

Pakeiskite spalvų temą $ spalvų

Atidarykite programą teksto rengyklėje. (Aš naudoju „Jetbrains btw“ „WebStorm IDE“)

Tada pradėkite naršydami šį failą:

src / tema / kintamieji.scss

Čia galite pamatyti, kad programos spalvų tema yra nustatoma kintamuoju, vadinamu $ colours, šiuos klavišus / reikšmes galite redaguoti kiek norite, net pridėti naujų.

Norėdami parodyti jums, kaip tai veikia, tiesiog pakeiskite šešiabriaunę pagrindinės spalvos spalvą, pavyzdžiui, „raudona“.

Tai lems:

Visi komponentai, kurie naudoja pagrindinę spalvą, dabar yra nustatyti kaip pagrindinė spalva, kuri yra raudona.

Šias spalvas galite lengvai naudoti bet kuriame komponente. Aš dabar jums parodysiu, kaip jūs galite tai padaryti!

Eikite į šį failą:

src / puslapiai / namai / namai.scss

Į šį failą pridedame konkretaus puslapio SCSS, tai reiškia, kad čia pridedami stiliai bus taikomi tik pagrindiniame puslapyje.

Mes pakeisime h2 teksto „Welcome to Ionic!“ Spalvą į pagrindinę (raudona) spalvą. Norėdami tai padaryti, turime pridėti H2 žymą į pagrindinį puslapį ir nepaisyti spalvų, kad gautume žemėlapį (pagrindinės spalvos yra $). Tai atneš kintamas $ spalvas ir rakto „pirminis“ reikšmę.

Taip yra dėl to:

Dabar h2 spalva taip pat yra raudona! Misijos sėkmė!

Kaip jūs jau supratote, taip pat galite naudoti bet kurį klavišą savo kintamame $ spalvų. Pabandykite šiek tiek su juo pažaisti, netgi pridėkite naujų!

$ Spalvų naudojimas yra geras būdas sekti visas programos spalvas. Tuo pačiu metu lengvai galite pakeisti milžiniškos elementų spalvos. Užuot reikėję priartinti visus skirtingus komponentus ir pakeisti spalvas rankiniu būdu, kaip tai būtų daroma, jei nenaudotumėte SCSS.

Svarbiausi joniniai kintamieji

Aplanke „src / theme / variables.scss“ galite pakeisti daugybę iš anksto paruoštų „Ionics“ dizainų. Pvz., Mes norime pakeisti įrankių juostos, kurią mums sukūrė „ionic“, spalvą. Galime pereiti prie „Ionic 2“ dokumentacijos ir ieškoti „įrankių juostos“. Šiek tiek slinkdami žemyn, pamatysite „įrankių juostos foną“, to mums ir reikia. Čia galite pamatyti, kad numatytoji temos spalva yra nustatyta „# f8f8f8“.

Mes pakeisime šios įrankių juostos spalvą į pagrindinę. Eikite į failą „variables.scss“ ir pridėkite tai:

$ įrankių juosta-fonas: map-get ($ spalvų, pirminė);

ir voila, visi jūsų įrankių juostos fonai jūsų programoje taps pagrindine spalva, kurią anksčiau nustatėme raudona!

Hm, bet kas, jei manote, kad įrankių juosta yra per maža? Ir norite padidinti jo aukštį? Tai galite padaryti labai panašiai!

Eikite į „Ionic 2“ dokumentacijos puslapį „Nepaisantys kintamieji“ ir ieškokite įrankių juostos aukščio.

apačioje galite pamatyti $ toolbar-ios-height, $ toolbar-md-height ir $ toolbar-wp-korke. Tai yra skirtinga visų trijų jūsų sukurtų platformų įrankių juosta! „ios“ = „iPhone“, md = „Android“ ir wp = „Windows Phone“. Norėdami tai išbandyti, išsirinkite „iOS“ įrankių juostą ir įdėkite ją į „kintamąjį.scss“ ir tiesiog nustatykite jai naują vertę, tokią:

Tai lems:

Kaip matote, „iOS“ įrankių juosta dabar yra didžiulė. Drąsiai eksperimentuokite ir pamėginkite surasti daugiau komponentų, kurių stilių galite nepaisyti. Jei nežinote ieškomo komponento pavadinimo, galite dešiniuoju pelės mygtuku spustelėti komponentą naršyklėje ir surasti komponento klasės pavadinimą, o tada naudoti jį paieškai „Ionic 2“ dokumentacijoje!

Taip pat galite pasižvalgyti atlikdami „Ionic 2“ github reppo skirtingiems komponentams ir pamatyti, kuriuos kintamuosius jie turi.

Pasinaudokite pasirinktiniu platformos dizainu

Kadangi tuo pačiu metu kuriate programą trims platformoms, labai svarbu, kad galėtumėte pritaikyti savo komponentus kiekvienam ir vienam iš jų atskirai. Aš turiu omenyje, kad medžiagų dizainas iš tikrųjų netinkamai veikia „iOS“.

Norėdami tai parodyti, pakeisime

teksto spalvą „iOS“ platformoje.

Eikite į šį failą:

src / app / app.scss

Čia galite pridėti globalių SCSS kintamųjų. Reiškia, kad jūsų įvesti stiliai bus taikomi visai programai.

Norėdami „

“ tekstą padaryti „iOS“ žaliu, tiesiog pridėkite šį SCSS prie to failo:

.ios {
  p {
    spalva: žalia;
  }
}

Tai lems tai! :)

Manau, kad tai lengvai viena iš vertingiausių stiliaus savybių, kurias suteikia „Ionic 2“.

Tai labai paprastas pavyzdys, kaip tai padaryti. Bet jei jūs įsivaizduojate galimybes! Iš esmės galite sukurti vieną programą ir kiekvienoje platformoje ji atrodo ypač originali ir skirtinga. Mygtukų animacijos tikriausiai turėtų skirtis kiekvienoje platformoje, kad jos atitiktų gimtoji animacijas, tiesa? Tikiuosi, jūs suprantate, kiek laiko sutaupysite, atlikdami tai, užuot sukūrę tris skirtingas vietines programas.

Aš baigsiu savo apžvalgą čia ir palieku jums tai padaryti! Pabandykite žaisti kiek įmanoma daugiau, o apie „Ionic 2“ galite sužinoti dar daug. Aš ką tik apžvelgiau stiliaus pagrindus.

Tačiau atminkite, kad kai suprasite, kaip visa tai padaryti, galėsite sujungti visus dalykus, kad sukurtumėte tikrai gerai atrodančias programas!

Ateityje darysiu panašius pranešimus apie kitus „Ionic 2“ sistemos aspektus, pavyzdžiui, kaip vartoti „Api“, „E2E“ testus ir kitus įdomius dalykus.

Aš pastūmėjau šio žvilgsnio rezultatą į savo „Github“, jei norite jį patikrinti!

Greitai pasimatysime!