Tutorial Ionic Part 8 : Pengenalan Komponen Tabs Pada Ionic

Tutorial Ionic Part 8 : Pengenalan Komponen Tabs Pada Ionic – hallo sahabat malasngoding. terima kasih sudah kembali sduah berkunjung ke malasngoding.com
sesuai dengan judulnya, kita akan membahas komponen tabs pada ionic. ok, langsung ke tutoral selengkanya.
Pengenalan Komponen Tabs Pada Ionic
Pengenalan Komponen Tabs Pada Ionic – ionic tabs merupakan sebuah navigasi yang sangat sering kita jumpai pada aplikasi mobile baik itu ios maupun android. pada artikel kali saya akan membahas Pengenalan Komponen Tabs Pada Ionic.
untuk template tabs sendiri sebenarnya sudah disediakan ionic framework, jika belum jelas (template yang disediakan ionic baca disini) . namun template yang disediakan itu masih dalam desain sangat sederhana, tapi kita bisa memodifikasi template tersebut semenarik mungkin.
Tabs Pada Ionic
oke, langsung ke tutorial cara membuat tabs menu pada ionic. disini saya menggunakan template blank dan akan saya modif menjadi tampilan tab.

blank template ionic
menu tab ionic sederhana dapat dibuat dengan menambahkan class tabs, sedangkan elemen yang perlu kita tambahkan dalam class tabs ini adalah tab-item, berikut contohnya.
buka index.html dan tambahkon kode berikut :
1 2 3 4 5 6 7 8 9 10 11 |
<div class="tabs"> <a class="tab-item"> <i>Tab 1</i> </a> <a class="tab-item"> <i>tab 2</i> </a> <a class="tab-item"> <i>tab 3</i> </a> </div> |

tab pada ionic
menambahkan ikon pada tab ionic
diatas sudah kita buat contoh membuat tab sederhana, maka untuk tampilan yang lebih menarik kita perlu menambahkan ikon pada tab yang kita buat. berikut contohnya :
1 2 3 4 5 6 7 8 9 10 11 |
<div class="tabs tabs-icon-only"> <a class="tab-item"> <i class="icon ion-android-home"></i> </a> <a class="tab-item"> <i class="icon ion-android-contacts"></i> </a> <a class="tab-item"> <i class="icon ion-music-note"></i> </a> </div> |

tab icon pada ionic
untuk documentasi ikon sendiri dapat dilihat di ionic icon
Memberikan Warna untuk pada tab navigasi ionic
unutk tampilan lebih menarik lagi, kita akan mencaba menambahkan warna pada tab yang sudah kita buat. memberikan warna pada bagian tab ini lebih dikenal dengan tabs stripped. untuk lebih jelas penggunaan tabs-stripped ini perhatikan contoh berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ion-header-bar class="bar-positive"> <h3 style="color:white">Tabs</h3> </ion-header-bar> <div class="tabs-striped tabs-background-positive tabs-color-light"> <div class="tabs tabs-icon-top"> <a class="tab-item"> <i class="icon ion-android-home"></i> /a> <a class="tab-item"> <i class="icon ion-android-contacts"></i> </a> <a class="tab-item"> <i class="icon ion-music-note"></i> </a> </div> </div> |
dan tampilan dari hasil kodingan di atas :

tabs stripped ionic
dan ketika salah satu navigasi tab tersebut di klik makan tampilannya tab itu akan sedikit perubahan, untuk lebih perubahannya silahkan lihat tampilan berikut :

tab stripped ionic
tabs-stripped yaitu sebuah class yang disediakan oleh ionic yang fungsinya untuk memberikan tanda berupa garis pada tab yang sudah di klik.
ok, sahabat malasngoding.com sekian dulu pembahasan tutorial ionic kita berjumpa kembali pada tutorial selanjutnya, terima kasih.
Tutorial Menarik Lainnya

Tutorial Ionic Part 11 : Icon Pada Ionic


Tutorial Ionic Part 10 : Checkbox pada Ionic


Tutorial Ionic Part 9 : Penggunaan Warna Pada Ionic

