İyonik - Javascript Sekmeleri

Sekmeler, herhangi bir gezinme türü için veya uygulamanızdaki farklı sayfaları seçmek için kullanışlı bir modeldir. Aynı sekmeler, Android cihazlar için ekranın üst kısmında ve IOS cihazları için alt kısımda görünecektir.

Sekmeleri Kullanma

Kullanılarak uygulamaya sekmeler eklenebilir ion-tabs bir konteyner öğesi olarak ve ion-tabiçerik öğesi olarak. Ekleyeceğizindex.html, ancak bunu uygulamanızın içindeki herhangi bir HTML dosyasına ekleyebilirsiniz. Sadece içeri eklemediğinizden emin olun.ion-content beraberinde gelen CSS sorunlarını önlemek için.

index.html Kodu

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

Çıktı, aşağıdaki ekran görüntüsünde gösterildiği gibi görünecektir.

İçin API mevcuttur ion-tabelementler. Bunu, kullandığımız yukarıdaki örnekte gösterildiği gibi öznitelikler olarak ekleyebilirsiniz.title, icon-on ve icon-off. Son ikisi, seçilen sekmeyi geri kalanından ayırmak için kullanılır. Yukarıdaki resme bakarsanız, ilk sekmenin seçildiğini görebilirsiniz. Özniteliklerin geri kalanını aşağıdaki tabloda kontrol edebilirsiniz.

Sekme Özellikleri

Öznitelik	Tür	Detaylar
Başlık	dizi	Sekmenin başlığı.
href	dizi	Sekme gezinme için kullanılan bağlantı.
ikon	dizi	Sekmenin simgesi.
ikon üzerinde	dizi	Sekmenin simgesi seçildiğinde.
ikon kapalı	dizi	Sekmenin simgesi seçilmediğinde.
rozet	ifade	Sekme için rozet.
rozet tarzı	ifade	Sekme için rozet stili.
seçili	ifade	Sekme seçildiğinde çağrılır
seçimi kaldırıldığında	ifade	Sekme seçimi kaldırıldığında çağrılır
gizli	ifade	Sekmeyi gizlemek için kullanılır.
engelli	ifade	Sekmeyi devre dışı bırakmak için kullanılır.

Sekmelerin ayrıca, uygulama içindeki tüm sekmelerin daha kolay kontrolü için kendi temsilci hizmeti vardır. Kontrolöre enjekte edilebilir ve aşağıdaki tabloda gösterilen birkaç yöntemi vardır.

Temsilci Yöntemleri

Yöntem	Parametreler	Tür	Detaylar
selectedIndex ()	/	numara	Seçili sekmenin dizinini döndürür.
$ getByHandle (parametre1)	üstesinden gelmek	dizi	Yöntemleri aynı tutamaçla belirli sekme görünümüne bağlamak için kullanılır. Sap eklenebilirion-tabs kullanarak delegate-handle = "my-handle" öznitelik. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();