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 :

tab pada ionic

Referensi source code untuk belajar

Source Code Sistem Informasi Inventaris Sekolah Dengan PHP dan MySQLi

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 :

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 :

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.