• celalcanh.h.oglu@gmail.com

Ionic Css Component Yapısı (Init 102)

cordova_bot

Ionic Css Component Yapısı (Init 102)

Ionic’in Css yapısını ve kodların nasıl çalıştığını geçen ders anlatmıştım.Devam ediyorum burada ki kodlamaların ekran görüntüsü ile daha anlaşılabilir olduğunu düşünüyorum.

Footer Componenti için;

burada div ekranın en altına otomatik yerleşir.

init102

Burada ikinci yapı olarak Buttonları anlatacam en çok kullanacağımız obje olarak button işlevi sizde biliyorsunuz ki tıklama veya olay dinleme olarak geçiyor.

Yani bir button içindeki foksiyona(function) nasıl bir js kodu yazılmışsa o işlevi gerçekleştirir.

Burada öncelikle css yapısını göstereyim;

Button kodları içinde önceden gösterdiğim stable özelliği buttona renk verir. Daha da ileri giderek button’un boyutu için de ;

init-102-1

Burada gördüğünüz buttonun ionic kütüphanesinde eklenmiş boyutlarıdır.

button-block ile tam ekrana yakın bir özellik ile kolay kullanım izni verir.

init-102-2

Button eğer tam ekran kenarına kadar olmasını isterseniz button-full kodunu class’ın içine ekleyebilirsiniz.

Outline Button ;

Sadece kenar kısımları ile daha şeffaf button oluşturabilirsiniz.

init-102-3

Şimdi buttonlar bazen ikon(icon) yerini de alabilir bunu için ionic ayrı bir kütüphane oluşturmuş.

init-102-4

Burada gördüğünüz ikonlara işlev verebilmek için ng-click=”iconcan()” gibi fonksiyon oluşturup js içinde görev ataması yapmalısınız.

örnek olursa;

$scope.iconcan=function(){

console.log(“şekerci”); //consol da tıklanınca görünecek veri !

}

Buradaki “ng” AngularJS kütüphanesinden oluşturulmuştur.

Diğer ders görüşmek üzere ..!

Numan Ayhan

Mesajınızı bırakın