Ionic - Tab

Ionic tabssebagian besar waktu digunakan untuk navigasi seluler. Styling dioptimalkan untuk berbagai platform. Artinya, di perangkat android, tab akan ditempatkan di bagian atas layar, sedangkan di iOS ada di bagian bawah. Ada berbagai cara untuk membuat tab. Kami akan memahami secara detail, cara membuat tab di bab ini.

Tab Sederhana

Menu Tab Sederhana dapat dibuat dengan file tabskelas. Untuk elemen dalam yang menggunakan kelas ini, kita perlu menambahkantab-itemelemen. Karena tab biasanya digunakan untuk navigasi, kami akan menggunakan<a>tag untuk item tab. Contoh berikut menampilkan menu dengan empat tab.

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

Kode di atas akan menghasilkan layar berikut -

Menambahkan Ikon

Ionic menyediakan kelas untuk menambahkan ikon ke tab. Jika Anda ingin tab Anda memiliki ikon tanpa teks, atabs-icon-only kelas harus ditambahkan setelah tabskelas. Tentu saja, Anda perlu menambahkan ikon yang ingin Anda tampilkan.

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

Kode di atas akan menghasilkan layar berikut -

Anda juga dapat menambahkan ikon dan teks secara bersamaan. Itutabs-icon-top dan tabs-icon-leftadalah kelas yang masing-masing akan menempatkan ikon di atas atau di sisi kiri. Implementasinya sama dengan contoh yang diberikan di atas, kami hanya akan menambahkan kelas dan teks baru yang ingin kami gunakan. Contoh berikut menunjukkan ikon yang ditempatkan di atas teks.

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

Kode di atas akan menghasilkan layar berikut -

Tab Bergaris

Tab Bergaris dapat dibuat dengan menambahkan wadah di sekitar tab kita dengan tabs-stripedkelas. Kelas ini memungkinkan penggunaan filetabs-background dan tabs-color awalan untuk menambahkan beberapa warna ionik ke menu tab.

Dalam contoh berikut, kami akan menggunakan tabs-background-positive (biru) untuk memberi gaya pada latar belakang menu kita, dan tabs-color-light(putih) untuk memberi gaya pada ikon tab. Perhatikan perbedaan antara tab kedua yang aktif dan dua lainnya yang tidak.

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

Kode di atas akan menghasilkan layar berikut -