Skip to main content
cara membuat component tabs Ionic

Cara Membuat Component Tabs Framework Ionic

Cara Membuat Component Tabs Framework Ionic

Salam sejahtera, masih seputar pembelajaran tentang penggunaan Ionic Framework untuk pengembangan aplikasi mobile, kali ini kita akan bahas tentang Cara Membuat Component Tabs Framework Ionic. Ada beberapa materi pembahasan sebelumnya tentang awal menggunakan Framework Ionic, mulai dari instalasi awal, pembuatan project dan menjalankan project melaluiserve. Pembahasan tersebut mudah-mudahan menjadi landasan awal untuk lanjut ketahap ini. Pembahasan tentang pengenalan Struktur code project ionic ini sangat penting untuk pemahaman untuk pengembangan project ionic.

Baca : Pembuatan Project Ionic

Topik pembahasan Cara Membuat Component Tabs Framework Ionic

  1. Pengenalan Component Tabs
  2. Component Tabs icon
  3. Top Icon Tabs
  4. Left Icon Tabs
  5. Striped Style Tabs
  6. Source Code latihan

Download Source Code Latihan : Via DropBox

Pengenalan Component Tabs Framework Ionic

Kita mulai pembahasan tentang cara membuat component tabs. Tabs merupakan sekumpulan Buttons secara horizontal yang biasanya digunakan untuk navigasi. Dapat digunakan dengan kombinasi teks dan ikon, dan tabs juga paling populer digunakan untuk navigasi di aplikasi Smartphone.

Tabs dapat menggunakan warna standar Ionic atau bisa juga kita custom nya sesuai kebutuhan. Berikut gambaran contoh aplikasi yang menggunakan Tabs.

cara membuat component tabs Ionic
Contoh component tabs

Untuk cara membuat component tabs dan menambahkan Tabs dalam project Ionic hanya cukup dengan mengetikkan source code berikut:

<div class="bar bar-header">
<h1 class="title">Contoh Tabs</h1>
	 </div>
<div class="tabs tabs-royal">
  <a class="tab-item">Home</a>
  <a class="tab-item">About</a>
  <a class="tab-item">Contak</a> 
</div>

Jika coding tersebut di run, maka akan menghasilkan tampilan berikut:

cara membuat component tabs Ionic
component tabs Ionic

Note :

Framework Ionic sendiri sebenarnya sudah menyediakan template tabs. Template ini bisa kita gunakan saat pertama kali membuat aplikasi menggunakan perintah Command line atau Ionic Lab.

Kita mulai pembahasan awal tentang component Tabs

1.1 Icon Only Tab (Tabs bentuk icon)

Untuk membuat Tabs yang hanya terdiri dari gambar icon saja, tidak ada keterangan Teks yang bisa kita atur posisinya bisa dibagian atas atau bawah, kita hanya perlu mengetikkan source code berikut :

<div class="bar bar-header">
<h1 class="title">Contoh Tabs</h1>
	 </div>
<div class="tabs tabs-royal tabs-icon-only">
  <a class="tab-item"><i class="icon ion-home"></i>Home</a>
  <a class="tab-item"><i class="icon ion-star"></i>About</a>
  <a class="tab-item"><i class="icon ion-gear-a"></i>Contak</a> 
</div>

Hasil run projectnya :

cara membuat component tabs Ionic
component tabs Ionic

1.2 Top Icon Tabs

Pemahaman tentang tabs model ini yaitu aplikasi yang tampilan Tabs disertai keterangan (label) dan icon sekaligus. untuk membuat nya kita hanya perlu source code berikut:

<div class="tabs tabs-royal tabs-icon-top">
  <a class="tab-item"><i class="icon ion-home"></i>Home</a>
  <a class="tab-item"><i class="icon ion-star"></i>About</a>
  <a class="tab-item"><i class="icon ion-gear-a"></i>Contak</a> 
</div>

Hasil run projectnya:

cara membuat component tabs Ionic
component tabs Ionic

1.3 Left Icon Tabs

Pemahaman nya adalah tampilan Tabs disertai Icon dan label disisi kiri. Hanya berbeda penempatan label dengan yang model sebelumnya. Berikut source code untuk membuatnya:

<div class="tabs tabs-royal tabs-icon-left">
  <a class="tab-item"><i class="icon ion-home"></i>Home</a>
  <a class="tab-item"><i class="icon ion-star"></i>About</a>
  <a class="tab-item"><i class="icon ion-gear-a"></i>Contak</a> 
</div>

Hasil run projectnya:

cara membuat component tabs Ionic
component tabs Ionic

1.4 Striped Style Tabs

ini merupakan tabs ala aplikasi Android. Hasil dari tabs model ini bisa menampilkan tabs di atas dan awah disertai tampilan bacground yang bisa kita atur sesuai kebutuhan aplikasi. Berikut contoh sederhananya:

<div class="bar bar-header bar-assertive has-tabs-top">
<h1 class="title">Contoh Tabs</h1>
	 </div>

<div class="tabs-striped tabs-top tabs-background-assertive tabs-light">
<div class="tabs">
  <a class="tab-item active" href=""><i class="icon ion-home"></i>Home</a>
  <a class="tab-item" href=""><i class="icon ion-star"></i>About</a>
  <a class="tab-item" href=""><i class="icon ion-gear-a"></i>Contak</a> 
</div> 
</div>

<div class="tabs-striped tabs-background-dark tabs-color-assertive">
<div class="tabs">
  <a class="tab-item active" href=""><i class="icon ion-home"></i>Home</a>
  <a class="tab-item" href=""><i class="icon ion-star"></i>About</a>
  <a class="tab-item" href=""><i class="icon ion-gear-a"></i>Contak</a> 
</div>
</div>

Hasil dari coding diatas adalah sebagai berikut:

cara membuat component tabs Ionic
Combinasi Tabs Ionic

Kesimpulan Cara Membuat Component Tabs Framework Ionic

  1. Menggunakan Component Tabs dalam membangun aplikasi Mobile sangat berguna jika aplikasi kita sangat kompleks
  2. Terdapat berbagai macam model dan style yang bisa kita atur untuk menarik tampilan aplikasi
Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com