Průvodce pro začátečníky o tom, jak navrhnout mobilní aplikaci Ionic 2

Hej lidi! V tomto příspěvku vás krok za krokem provedu extrémními základy, jak stylizovat aplikaci Ionic 2 pomocí SCSS.

Chcete-li tento průchod co nejlépe využít, bylo by dobré mít předchozí znalosti o CSS a Ionic, ale není to nutné. Pokud nejste obeznámeni s rámcem Ionic 2, doporučuji vyzkoušet si dokumentaci Ionic 2.

Návod

Ionic 2 přináší spoustu věcí na stůl (Pokud nezačínáte z úplně prázdného lešení). Získáte aplikaci a je do značné míry již stylizovaná. Pokud však chcete provést změny, je trochu složitější, pokud jste začátečník.

Abychom mohli nainstalovat potřebné pluginy, musíme začít pracovat s Ionic, musíme si stáhnout a nainstalovat NodeJS. Poté můžete Cordova a Ionic nainstalovat z terminálu spuštěním tohoto příkazu:

$ npm install -g ionic Cordova

Budeme také muset nainstalovat strojopis, což je jazyk, s nímž je Ionic 2 vytvořen. Spusťte tento příkaz:

$ npm install -g strojopis

Abychom se zaměřili především na styling, použijeme pre-made aplikaci se základním designem.

Spusťte tento příkaz ve vašem terminálu a vytvořte tak lešení pro karty Ionic 2:

$ ionic start myTabs tabs - v2

Získáte aplikaci s kartami, takže můžete procházet mezi různými pohledy. Můžete to vyzkoušet v prohlížeči zadáním do terminálu!

$ ionic sloužit
Jak vidíte, Ionic přizpůsobuje různé komponenty pro každou platformu. Níže se věnuji více informací o tom, jak udělat konkrétní návrh platformy. Získáte také sadu standardních motivových barev a vypadá to docela všeobecně.

Změňte barevné téma pomocí $ barev

Otevřete aplikaci v textovém editoru. (Používám WebStorm IDE od Jetbrains btw)

Začněte tím, že přejdete na tento soubor:

src / theme / variable.scss

Zde vidíte, že barevné téma aplikace je nastaveno v proměnné nazvané $ colours, tyto klíče / hodnoty můžete libovolně upravovat, dokonce přidávat nové.

Chcete-li ukázat, jak to funguje, jednoduše nahraďte hexadecimální barvu na primární například „červenou“.

Výsledkem bude:

Všechny komponenty, které používají primární barvu, jsou nyní nastaveny na primární barvu, která je červená.

Tyto barvy můžete snadno použít v jakékoli součásti. Nyní vám ukážu, jak to můžete udělat!

Přejděte do tohoto souboru:

src / pages / home / home.scss

V tomto souboru přidáváme SCSS specifické pro stránku, což znamená, že styly, které sem přidáte, budou použity pouze na domovskou stránku.

Změníme barvu textu h2 „Vítejte v Ionic!“ Na primární barvu (červená). Abychom toho dosáhli, musíme přidat domovskou stránku h2 a přepsat barvu, aby byla mapa získána ($ colours, primární). Tím se načtou proměnné $ barvy a hodnota klíče „primární“.

To je výsledek toho:

Barva h2 je nyní také červená! Úspěch mise!

Jak jste nyní možná zjistili, můžete také použít kteroukoli z kláves v proměnné $ colours. Zkuste si s tím trochu pohrát, dokonce přidat nějaké nové!

Použití $ barev je dobrý způsob, jak sledovat všechny barvy v aplikaci. Můžete snadno změnit barvy obrovského kusu prvků najednou. Místo toho, abyste museli přiblížit všechny různé komponenty a měnit barvy ručně, jako byste to museli udělat, pokud nepoužíváte SCSS.

Převažující iontové proměnné

V „src / theme / variable.scss“ můžete změnit mnoho předem připravených návrhů iontů. Chceme například změnit barvu lišty nástrojů, kterou pro nás iontová navrhla. Můžeme přejít k dokumentaci Ionic 2 a hledat „panel nástrojů“. Pokud se trochu posunete dolů, najdete „pozadí panelu nástrojů“, to je to, co potřebujeme. Zde vidíte, že výchozí barva motivu je nastavena na „# f8f8f8“.

Změníme barvu tohoto panelu nástrojů na naši primární barvu. Přejděte do svého souboru „varia.scss“ a přidejte toto:

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

a voila, všechna vaše pozadí na panelu nástrojů v aplikaci se stanou naší primární barvou, kterou jsme dříve nastavili na červenou!

Hm, ale co když si myslíte, že je panel nástrojů příliš malý? A chcete to zvýšit? Můžete to udělat velmi podobným způsobem!

Přejděte na stránku Přepisovatelné proměnné v dokumentaci Ionic 2 a vyhledejte výšku lišty nástrojů.

dole vidíte $ toolbar-ios-height, $ toolbar-md-height a $ toolbar-wp-height. Toto je jiný panel nástrojů pro všechny tři platformy, pro které vyvíjíte! ios = Iphone, md = Android a wp = Windows Phone. Chcete-li to vyzkoušet, vyberte panel nástrojů iOS a umístěte jej do proměnné „sc.scss “a jednoduše do něj zadejte novou hodnotu, například:

Výsledkem bude:

Jak vidíte, panel nástrojů v systému iOS je nyní obrovský. Neváhejte s tím experimentovat a pokuste se najít další komponenty, na kterých můžete styl přepsat. Pokud neznáte název komponenty, kterou hledáte, můžete kliknout pravým tlačítkem na komponentu v prohlížeči a vyhledat název třídy komponenty a poté ji použít pro vyhledávání v dokumentaci Ionic 2!

Můžete se také hrabat v repozitáři Ionic 2 github pro různé komponenty a zjistit, jaké proměnné mají.

Využijte vlastní specifický design platformy

Protože vyvíjíte aplikaci pro tři platformy současně, je důležité, abyste své komponenty mohli přizpůsobit pro každou z nich zvlášť. Myslím, že materiální design v iOS opravdu nefunguje.

Abychom to dokázali, změníme barvu textu

na platformě iOS.

Přejděte do tohoto souboru:

src / app / app.scss

Zde můžete přidat globální proměnné SCSS. Znamená to, že styly, které sem zadáte, budou použity pro celou aplikaci.

Chcete-li, aby se text „

“ na systému iOS stal zeleným, jednoduše přidejte tento SCSS do tohoto souboru:

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

To bude mít za následek! :)

Myslím, že je to snadno jedna z nejcennějších stylů, které přináší Ionic 2.

Toto je velmi jednoduchý příklad, jak to děláte. Ale pokud si představujete možnosti! V podstatě si můžete vytvořit jednu aplikaci a učinit ji tak, aby vypadala super nativně a jinak na každé platformě. Animace tlačítek by se pravděpodobně měly lišit pro každou platformu, aby odpovídala nativním animacím, že? Doufám, že pochopíte, kolik času ušetříte tím, že to uděláte místo vývoje tří různých nativních aplikací.

Zde dokončím svůj průchod a nechám vás na něm! Zkuste si pohrát co nejvíce, a je toho mnohem víc, co se dozvíte o Ionic 2. Právě jsem se zabýval základem stylingu.

Ale pamatujte si, že když pochopíte, jak to vše udělat, budete schopni spojit všechny věci a vytvořit opravdu dobře vypadající aplikace!

V budoucnu budu dělat podobné příspěvky o dalších aspektech rámce Ionic 2, jako například o tom, jak spotřebovat Api, testování E2E a další zábavné věci.

Výsledek tohoto průchodu jsem poslal do svého Githubu, pokud si to chcete prohlédnout!

Brzy se uvidíme!