Bir Ionic 2 Mobile App Stil Nasıl Yeni Bir Başlangıç ​​Kılavuzu

Hey Millet! Bu yazıda, adım adım, SCSS kullanarak bir Ionic 2 uygulamasının nasıl tasarlanacağına dair temel bilgileri inceleyeceğim.

Bu aşamadan en iyi şekilde faydalanmak için, CSS ve İyonik hakkında önceden bilgi sahibi olmak iyi olurdu, ancak gerekli değildir. Ionic 2 çerçevesine aşina değilseniz, Ionic 2 belgelerine göz atmanızı öneririm.

Adımlar

İyonik 2 masaya pek çok şey getirir (Tamamen boş bir iskeleden başlamazsanız). Bir uygulama olsun ve hemen hemen tarz. Ancak değişiklik yapmak istiyorsanız, yeni başlayanlar için biraz zorlaşır.

Gerekli eklentileri kurabilmek için Ionic ile çalışmaya başlamamız ve NodeJS'yi indirmemiz ve yüklememiz gerekiyor. Bundan sonra bu komutu çalıştırarak Cordova ve Ionic'i terminalinizden kurabilirsiniz:

$ npm kurulum -g iyonik cordova

Ayrıca Ionic 2'nin oluşturulduğu dil olan Typescript'i kurmamız gerekecek. Bu komutu çalıştırın:

$ npm install -g typescript

Bu adım adım esas olarak stillendirmeye odaklanmak için, temel tasarıma sahip önceden yapılmış bir uygulama kullanacağız.

Terminalinizde bu komutu çalıştırarak bir İyonik 2 sekme uygulamasını iskele:

$ ionic start myTabs sekmeleri --v2

Sekmeler içeren bir uygulama alacaksınız, böylece farklı görünümler arasında gezinebilirsiniz. Terminalde bunu yazarak tarayıcıda test edebilirsiniz!

$ iyonik servis
Gördüğünüz gibi, İyonik her platform için farklı bileşenleri kişiselleştirir. Aşağıda platforma özel tasarımın nasıl yapılacağı hakkında daha fazla şey ele alacağım Ayrıca standart tema renklerini de elde edersiniz ve oldukça genel görünür.

Renk temasını $ renklerle değiştirme

Uygulamayı bir metin düzenleyicide açın. (Jetbrains btw tarafından WebStorm IDE kullanıyorum)

Ardından bu dosyaya giderek başlayın:

src / tema / variables.scss

Burada, uygulamanın renk temasının $ colors adlı bir değişkende ayarlandığını görebilirsiniz, bu anahtar / değerleri istediğiniz kadar düzenleyebilir, hatta yenilerini ekleyebilirsin.

Nasıl çalıştığını göstermek için, birincil olarak altıgen rengi örneğin “kırmızı” ile değiştirin.

Bu sonuçlanacak:

Ana rengi kullanan tüm bileşenler şimdi kırmızı olan ana renge ayarlanmıştır.

Bu renkleri herhangi bir bileşende kolayca kullanabilirsiniz. Şimdi size bunu nasıl yapabileceğinizi göstereceğim!

Bu dosyaya gidin:

src / sayfalar / home / home.scss

Bu dosyaya, sayfaya özel SCSS ekleriz, yani buraya eklediğiniz stillerin yalnızca ana sayfaya uygulanacağı anlamına gelir.

“İyonik'e Hoş Geldiniz!” H2 metninin rengini birincil renge (kırmızı) değiştireceğiz. Bunu yapabilmek için sayfa ana sayfasına h2 etiketini eklememiz ve map-get için rengi geçersiz kılmamız gerekir ($ renkler, birincil). Bu, $ colors değişkenini ve “birincil” anahtarının değerini getirecektir.

Bunun sonucu budur:

H2 rengi şimdi de kırmızı! Görev başarılı!

Şimdi düşündüğünüz gibi, $ colors değişkeninizdeki herhangi bir tuşu da kullanabilirsiniz. Biraz onunla oynamayı deneyin, hatta yenilerini ekleyin!

$ Renk kullanmak, uygulamadaki tüm renkleri takip etmek için iyi bir yoldur. Çok sayıda elementin renklerini aynı anda kolaylıkla değiştirebilirsiniz. Tüm farklı bileşenleri yakınlaştırmak ve renkleri manuel olarak değiştirmek yerine, SCSS kullanmıyorsanız yapmanız gerektiği gibi.

İyonik Değişkenleri Geçersiz Kılma

“Src / theme / değişken.scss” de, İyonik önceden hazırlanmış tasarımları değiştirebilirsiniz. Örneğin, iyoniğin bizim için tasarladığı araç çubuğunun rengini değiştirmek istiyoruz. Ionic 2 belgelerine gidebilir ve “araç çubuğu” araması yapabiliriz. Biraz aşağı kaydırırsanız “araç çubuğu arka planı” bulursunuz, bizim ihtiyacımız olan şey budur. Burada varsayılan tema renginin “# f8f8f8” olarak ayarlandığını görebilirsiniz.

Bu araç çubuğunun rengini birincil rengimizle değiştireceğiz. “Değişken.scss” dosyanıza gidin ve şunu ekleyin:

$ toolbar-background: map-get ($ renkler, birincil);

Ve işte, uygulamanızdaki tüm araç çubuğu arka planlarınız, daha önce kırmızıya ayarladığımız ana rengimiz olacak!

Hm, fakat araç çubuğunun çok küçük olduğunu düşünüyorsanız? Ve bunun yüksekliğini artırmak ister misiniz? Bunu da benzer şekilde yapabilirsiniz!

Ionic 2 belgelerinde Geçersiz Kılma Değişkenleri sayfasına gidin ve araç çubuğu yüksekliğini arayın.

alt kısımda $ toolbar-ios-height, $ toolbar-md-height ve $ toolbar-wp-height görebilirsiniz. Bunlar, geliştirdiğiniz üç platform için farklı araç çubuğudur! ios = Iphone, md = Android ve wp = Windows Phone. Test etmek için, iOS araç çubuğunu seçin ve “değişken.scss” içine yerleştirin ve bunun için yeni bir değer ayarlayın:

Bu sonuçlanacak:

Gördüğünüz gibi iOS'taki araç çubuğu artık çok büyük. Bunu denemekten çekinmeyin ve stili geçersiz kılabileceğiniz daha fazla bileşen bulmaya çalışın. Aradığınız bileşenin adını bilmiyorsanız, tarayıcıdaki bileşene sağ tıklayıp bileşenin sınıf adını bulabilir ve ardından Ionic 2 belgelerinde arama yapmak için bunu kullanabilirsiniz!

Ayrıca, farklı bileşenler için Ionic 2’nin github deposunda dolaşabilir ve hangi değişkenlere sahip olduklarını görebilirsiniz.

Özel platform özel tasarımını kullanın

Aynı anda üç platform için bir uygulama geliştirdiğiniz için, bileşenlerinizi her biri için ayrı ayrı özelleştirmeniz çok önemlidir. Demek istediğim, malzeme tasarımı iOS'ta pek iyi çalışmıyor.

Bunu göstermek için iOS platformunda

metninin rengini değiştireceğiz.

Bu dosyaya gidin:

src / uygulama / app.scss

Burada global SCSS değişkenleri ekleyebilirsiniz. Buraya koyduğunuz stillerin tüm uygulamaya uygulanacağı anlamına gelir.

İOS'taki “

” metnini yeşil yapmak için, bu SCSS'yi bu dosyaya eklemeniz yeterlidir:

.ios {
  p {
    yeşil renk;
  }
}

Bu sonuçlanacak! :)

Bu kolayca Ionic 2'nin getirdiği en değerli stil özelliklerinden biri olduğunu düşünüyorum.

Bu, bunu nasıl yaptığınıza dair çok basit bir örnektir. Ama olasılıkları hayal edersen! Temel olarak bir uygulama oluşturabilir ve her platformda süper yerel ve farklı görünmesini sağlayabilirsiniz. Düğme animasyonlar, her platformun yerel animasyonlarla eşleşmesi için muhtemelen farklı olmalı, değil mi? Umarım, üç farklı yerel uygulama geliştirmek yerine, bunu yaparak ne kadar zaman kazandığınızı anlarsınız.

Burada yolumu kapatıp seni bırakacağım! Yapabildiğiniz kadar oynamaya çalışın ve İyonik 2 hakkında daha çok şey öğrenebilirsiniz.

Ancak, bunların hepsini nasıl yapacağınızı anladığınızda, gerçekten iyi görünümlü uygulamalar oluşturmak için her şeyi birleştirebileceksiniz!

Gelecekte İyonik 2 çerçevesinin diğer yönleriyle, Api’lerin nasıl tüketileceği, E2E testi ve diğer eğlenceli şeylerle ilgili benzer yazılar yapacağım.

Eğer kontrol etmek istersen, bu adımın sonucunu Github'uma aktardım!

Yakında görüşürüz!