Sprievodca pre začiatočníkov o tom, ako navrhnúť mobilnú aplikáciu Ionic 2

Čaute ľudia! V tomto príspevku vás krok za krokom prevediem extrémnymi základmi o tom, ako navrhnúť aplikáciu Ionic 2 pomocou SCSS.

Ak chcete čo najlepšie využiť tento návod, bolo by dobré mať nejaké predchádzajúce znalosti o CSS a Ionic, ale to nie je potrebné. Ak nepoznáte rámec Ionic 2, odporúčam vám pozrieť si dokumentáciu Ionic 2.

Návod

Ionic 2 prináša na stôl veľa vecí (ak nezačínate úplne prázdnym lešením). Získate aplikáciu a je do značnej miery už upravená. Ale ak to chcete zmeniť, bude trochu zložitejšie, ak ste začiatočník.

Aby sme mohli nainštalovať potrebné doplnky, musíme začať pracovať s Ionic, musíme si stiahnuť a nainštalovať NodeJS. Potom môžete Cordova a Ionic nainštalovať z vášho terminálu spustením tohto príkazu:

$ npm install -g ionic Cordova

Potrebujeme tiež nainštalovať strojopis, ktorý je jazykom Ionic 2, v ktorom je zabudovaný. Spustite tento príkaz:

$ npm install -g strojopis

Aby sme sa v tomto návode zamerali hlavne na styling, použijeme vopred vyrobenú aplikáciu so základným dizajnom.

Spustením tohto príkazu vo vašom termináli vytvorte lešenie pre karty Ionic 2:

Karty $ ionic start myTabs - v2

Získate aplikáciu s kartami, aby ste sa mohli pohybovať medzi rôznymi zobrazeniami. Môžete to vyskúšať v prehliadači zadaním do terminálu!

$ iónové servírovanie
Ako vidíte, spoločnosť Ionic prispôsobuje rôzne komponenty pre každú platformu. Nižšie sa venujem viac tomu, ako urobiť konkrétny dizajn platformy. Získate tiež sadu štandardných farieb tém a vyzerá to dosť všeobecne.

Zmeňte farebnú tému pomocou $ farieb

Otvorte aplikáciu v textovom editore. (Používam WebStorm IDE od Jetbrains btw)

Potom začnite navigáciou do tohto súboru:

src / téma / variables.scss

Tu vidíte, že farebná téma aplikácie je nastavená v premennej s názvom $ colours, tieto kľúče / hodnoty, ktoré môžete upravovať, ako chcete, môžete dokonca pridať nové.

Ak chcete ukázať, ako to funguje, jednoducho nahraďte hexadecimálnu farbu na primárnej, napríklad „červenou“.

Výsledkom bude:

Všetky komponenty, ktoré používajú primárnu farbu, sú teraz nastavené na primárnu farbu, ktorá je červená.

Tieto farby môžete ľahko použiť v ľubovoľnom komponente. Teraz vám ukážem, ako to môžete urobiť!

Prejdite na tento súbor:

src / pages / home / home.scss

V tomto súbore pridávame SCSS špecifické pre stránku, čo znamená, že štýly, ktoré tu pridáte, sa použijú iba na domovskú stránku.

Chystáme zmeniť farbu textu h2 „Vitajte v iónovej!“ Na primárnu farbu (červená). Aby sme to dosiahli, musíme do domovskej stránky pridať značku h2 a prepísať farbu, aby sa získala mapa ($ colours, primárne). Týmto sa načíta premenná $ color a hodnota kľúča „primárne“.

To je výsledkom toho:

Farba h2 je teraz tiež červená! Úspech misie!

Ako ste už možno zistili, môžete použiť ľubovoľnú z klávesov v premennej $ colours. Skúste si s tým trochu pohrať, dokonca pridať nejaké nové!

Používanie farieb $ je dobrý spôsob, ako sledovať všetky farby v aplikácii. Ľahko môžete meniť farby obrovského kusa prvkov súčasne. Namiesto toho, aby ste priblížili všetky rôzne komponenty a manuálne menili farby, ako by ste museli urobiť, ak nepoužívate SCSS.

Prevažujúce iónové premenné

V priečinku „src / theme / variable.scss“ môžete zmeniť množstvo vopred vyrobených iónskych návrhov. Napríklad chceme zmeniť farbu lišty nástrojov, ktorú pre nás ión navrhol. Môžeme prejsť na dokumentáciu Ionic 2 a vyhľadať „panel nástrojov“. Ak sa trochu posuniete nadol a nájdete „pozadie panela s nástrojmi“, potrebujeme toto. Tu vidíte, že predvolená farba témy je nastavená na „# f8f8f8“.

Farbu tohto panela s nástrojmi zmeníme na základnú farbu. Prejdite do svojho súboru „varia.scss“ a pridajte toto:

$ toolbar-background: map-get ($ colours, primárne);

a voila, všetky pozadie panela s nástrojmi v aplikácii sa stanú našou primárnou farbou, ktorú sme predtým nastavili na červenú!

Hm, ale čo ak si myslíte, že je panel nástrojov príliš malý? A chcete ho zvýšiť? Môžete to urobiť veľmi podobným spôsobom!

Prejdite na stránku Premenné premenné v dokumentácii Ionic 2 a vyhľadajte výšku panela nástrojov.

v dolnej časti môžete vidieť $ toolbar-ios-height, $ toolbar-md-height a $ toolbar-wp-height. Toto je odlišný panel nástrojov pre všetky tri platformy, pre ktoré vyvíjate! ios = Iphone, md = Android a wp = Windows Phone. Ak ju chcete vyskúšať, vyberte panel s nástrojmi iOS a umiestnite ho do premennej „scs.scss “a jednoducho do neho zadajte novú hodnotu, napríklad:

Výsledkom bude:

Ako vidíte, panel nástrojov v systéme iOS je teraz obrovský. Neváhajte s tým experimentovať a skúste nájsť ďalšie komponenty, ktoré môžete prepísať nad týmto štýlom. Ak nepoznáte hľadaný komponent, môžete pravým tlačidlom myši kliknúť na komponent v prehľadávači a vyhľadať názov triedy komponentu a potom ho použiť na vyhľadávanie v dokumentácii Ionic 2!

V githubovom repozitári Ionic 2 sa môžete tiež hrabať za rôzne komponenty a zistiť, ktoré premenné majú.

Využite špecifický dizajn platformy

Pretože vyvíjate aplikáciu pre tri platformy súčasne, je dôležité, aby ste mohli prispôsobiť svoje komponenty pre každú z nich osobitne. Myslím, že materiálny dizajn v systéme iOS naozaj nefunguje.

Aby sme to dokázali, zmeníme farbu textu

na platforme iOS.

Prejdite na tento súbor:

src / app / app.scss

Tu môžete pridať globálne premenné SCSS. Znamená to, že štýly, ktoré tu zadáte, sa použijú na celú aplikáciu.

Ak chcete, aby bol text „

“ na systéme iOS zelený, jednoducho do tohto súboru pridajte tento SCSS:

.ios {
  p {
    farba: zelená;
  }
}

To bude mať za následok! :)

Myslím si, že je to ľahko jedna z najcennejších funkcií, ktoré prináša Ionic 2.

Toto je veľmi jednoduchý príklad toho, ako to robíte. Ale ak si predstavujete možnosti! V podstate si môžete vytvoriť jednu aplikáciu a urobiť ju tak, aby vyzerala super natívne a odlišne na každej platforme. Animácie tlačidiel by sa mali pravdepodobne líšiť pre každú platformu tak, aby zodpovedali natívnym animáciám, nie? Dúfam, že pochopíte, koľko času ušetríte tým, že to urobíte namiesto vývoja troch rôznych natívnych aplikácií.

Tu dokončím môj návod a nechám vás na ňom! Skúste si zahrať toľko, koľko len dokážete a je toho oveľa viac, aby ste sa dozvedeli viac o iónovom jazyku 2. Práve som sa venoval základom stylingu.

Pamätajte však, že keď pochopíte, ako to všetko urobiť, budete môcť spojiť všetky veci a vytvoriť skutočne dobre vyzerajúce aplikácie!

V budúcnosti budem robiť podobné príspevky o ďalších aspektoch rámca Ionic 2, ako napríklad o tom, ako spotrebovať Api, testovanie E2E a ďalšie zábavné veci.

Výsledok tohto návodu som poslal do svojho Githubu, ak si ho chcete pozrieť!

Uvidíme sa skoro!