Hampir semua aplikasi baik itu mobile maupun web memiliki dua komponen ini (header dan footer) untuk membuat aplikasi tampil menarik. header merupakan kepala atau bagian atas aplikasi, biasanya pada header ini tempat di letakkanya menu yang tersedia pada aplikasi. sedangkan footer (kaki) merupakan bagian paling bawah tampilan aplikasi.
pada artikel kali saya akan membahas bagaimana Cara Membuat Header Dan Footer Di Ionic. sebenarnya pada framework ionic sudah disediakan fungsi khusus untuk membuat kedua komponen ini, jadi kita tinggal mengaksesnya saja dalam aplikasi yang kita buat. oke mari kita mulai penerapan dalam syntak programnya :
Cara Membuat Header Dan Footer Di Ionic
1. Buat aplikasi ionic dengan menggunakan template blank (jika belum mengerti cara membuat projek ionic silahkan baca artikel sebelumnya disini)
2. Membuat Header (kepala): tambahkan syntak berikut pada file index.html untuk membuat header
<ion-bar class="bar bar-header bar-positive">
<div class="title">Header</div>
</ion-bar>
Membaut Footer (kaki)
berikut syntax untuk membuat footer (kaki) :
<ion-bar class="bar bar-footer bar-positive">
<div class="title">Footer</div>
</ion-bar>
Menambahkan Element Pada Header
Salah satu elemen yang sering di jumpai pada heade (bagian kepala) seperti menu, pencarian dan lain-lain. berikut contoh menambahkan elemen pada bagian header :
<ion-bar class="bar bar-header bar-positive">
<button class="button icon ion-navicon"></button>
<div class="title">Header</div>
<button class="button icon ion-home"></button>
</ion-bar>
Menambahkan Sub Header
Selain header, sub header juga dapat di tambahkan pada ionic, contohnya :
selain pada header, elemen dapat juga ditambahkan pada bagian footer, contohnya :
untuk syntak lengkapnya seperti berikut :
<body ng-app="tutorial">
<ion-pane>
<!-- heade -->
<ion-bar class="bar bar-header bar-positive">
<button class="button icon ion-navicon"></button>
<div class="title">Header</div>
<button class="button icon ion-home"></button>
</ion-bar>
<!-- subheade -->
<ion-bar class="bar bar-subheader bar-royal">
<div class="title">Sub Header</div>
</ion-bar>
<!-- content -->
<ion-content>
</ion-content>
<!-- footer -->
<ion-bar class="bar bar-footer bar-positive">
<button class="button icon ion-navicon"></button>
<div class="title">Footer</div>
<button class="button icon ion-home"></button>
</ion-bar>
</ion-pane>
</body>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon