İyonik - Javascript Altbilgisi
Bu yönerge, ekranın altına bir altbilgi çubuğu ekleyecektir.
Altbilgiyi Kullanma
İyonik altbilgi, bir ion-footer-barsınıf. Onunla çalışmak, başlık ile çalışmakla aynıdır. Bir başlık ekleyip ekranın soluna, ortasına veya sağına yerleştirebiliriz.align-titleöznitelik. Önek ilebarİyonik renkleri kullanabiliriz. Başlığın ortasında kırmızı renkli bir altbilgi oluşturalım.
<ion-footer-bar align-title = "center" class = "bar-assertive">
<h1 class = "title">Title!</h1>
</ion-footer-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -

Eleman Ekleme
Düğmeler simgeleri veya başka öğeler ekleyebiliriz. ion-footer-barve stilleri uygulanacaktır. Altbilgimize bir düğme ve Simge ekleyelim.
<ion-footer-bar class = "bar-assertive">
<div class = "buttons">
<button class = "button">Button</button>
</div>
<h1 class = "title">Footer</h1>
<div class = "buttons">
<button class = "button icon ion-home"></button>
</div>
</ion-footer-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır−

Alt Altbilgi Ekleme
Size bir alt başlığı nasıl kullanacağınızı gösterdik. Aynı şekilde bir alt altbilgi oluşturulabilir. Altbilgi çubuğunun üzerinde yer alacaktır. Tek yapmamız gereken bir eklemekbar-subfooter bizim sınıfımız ion-footer-bar öğesi.
Aşağıdaki örnekte, daha önce oluşturduğumuz altbilgi çubuğunun üstüne alt altbilgiyi ekleyeceğiz.
<ion-footer-bar class = "bar-subfooter bar-positive">
<h1 class = "title">Sub Footer</h1>
</ion-footer-bar>
<ion-footer-bar class = "bar-assertive">
<div class = "buttons">
<button class = "button">Button</button>
</div>
<h1 class = "title">Footer</h1>
<div class = "buttons" ng-click = "doSomething()">
<button class = "button icon ion-home"></button>
</div>
</ion-footer-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -
