Ionic - Javascript Başlığı
Bu, başlık çubuğunu ekleyecek olan Ionic yönergedir.
JavaScript Başlığını Kullanma
Bir JavaScript başlık çubuğu oluşturmak için, ion-header-barHTML dosyasındaki yönerge. Varsayılan başlık beyaz olduğundan, ekleyeceğiztitle, böylece beyaz arka planda gösterilecektir. Biz ekleyeceğizindex.html dosya.
<ion-header-bar>
<h1 class = "title">Title!</h1>
</ion-header-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -

Üstbilgi Biçimlendirme
Tıpkı CSS Başlık Çubuğu gibi, JavaScript muadili de benzer bir şekilde şekillendirilebilir. Renk uygulamak için, bir renk sınıfı eklememiz gerekir.barönek. Bu nedenle, mavi bir başlık kullanmak istersek, birbar-positivesınıf. Ayrıca başlığı ekleyerek ekranın bir tarafına taşıyabiliriz.align-titleöznitelik. Bu özniteliğin değerleri olabilircenter, left veya right.
<ion-header-bar align-title = "left" class = "bar-positive">
<h1 class = "title">Title!</h1>
</ion-header-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -

Eleman Ekleme
Genellikle başlığınıza bazı öğeler eklemek isteyeceksiniz. Aşağıdaki örnek, nasıl yerleştirileceğini gösterir.button sol tarafta ve bir iconiyon başlık çubuğunun sağ tarafına. Başlığınıza başka öğeler de ekleyebilirsiniz.
<ion-header-bar class = "bar-positive">
<div class = "buttons">
<button class = "button">Button</button>
</div>
<h1 class = "title">Title!</h1>
<div class = "buttons">
<button class = "button icon ion-home"></button>
</div>
</ion-header-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -

Alt Başlık Ekleme
Bir alt başlık oluşturulduğunda bar-subheader sınıf eklendi ion-header-bar. Ekleyeceğizbar-assertive alt başlığımıza kırmızı rengi uygulamak için sınıf.
<ion-header-bar class = "bar-positive">
<div class = "buttons">
<button class = "button">Button</button>
</div>
<h1 class = "title">Title!</h1>
<div class = "buttons">
<button class = "button icon ion-home"></button>
</div>
</ion-header-bar>
<ion-header-bar class = "bar-subheader bar-assertive">
<h1 class = "title">Subheader</h1>
</ion-header-bar>
Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -
