Salah satu pola navigasi paling populer dan intuitif di aplikasi mobile adalah Tabs. Navigasi berbasis tab, yang biasanya terletak di bagian bawah layar, memungkinkan pengguna untuk beralih antar halaman atau fitur utama aplikasi dengan satu kali sentuhan. Ini adalah pola dasar yang digunakan oleh aplikasi-aplikasi besar seperti Instagram, Twitter, dan Tokopedia.

Ionic memiliki dukungan kelas satu untuk navigasi tab melalui komponen ion-tabs. Dalam tutorial ini, kita akan membedah cara kerja sistem navigasi tab yang dihasilkan oleh template bawaan Ionic, dan bagaimana Anda bisa mengustomisasinya. Ayo kita selami lebih dalam! 🗺️

Memahami Konsep Tabs di Ionic

Ketika Anda membuat proyek baru dengan template tabs (ionic start myApp tabs), Ionic CLI secara otomatis membuatkan kerangka kerja navigasi tab yang fungsional. Sistem ini terdiri dari beberapa komponen kunci yang bekerja bersama-sama.

1. Halaman Induk (TabsPage): Ini adalah halaman “pembungkus” yang berisi ion-tab-bar dan area untuk menampilkan konten dari setiap tab.
2. Halaman Anak (Tab1Page, Tab2Page, dst.): Ini adalah halaman-halaman sebenarnya yang akan ditampilkan ketika pengguna mengetuk sebuah tab.
3. Routing Module (tabs.router.ts): Ini adalah file konfigurasi yang paling penting. Ia mendefinisikan path (URL) untuk setiap tab dan halaman mana yang harus dimuat untuk setiap path tersebut.

Pada dasarnya, TabsPage berfungsi seperti bingkai, sedangkan konten di dalamnya (halaman anak) berubah sesuai dengan tab yang aktif.

Melihat Struktur Kode Tabs

Mari kita lihat file-file kunci yang mengendalikan sistem ini.

1. Halaman Induk: tabs.page.html

Buka file src/app/tabs/tabs.page.html. Anda akan menemukan kode yang sangat sederhana namun kuat:

<ion-tabs>

  <ion-tab-bar slot="bottom">
    
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Analisis Kode:

• <ion-tabs>: Komponen utama yang membungkus seluruh sistem tab.
• <ion-tab-bar slot="bottom">: Ini adalah bilah abu-abu di bagian bawah yang berisi tombol-tombol. slot="bottom" memastikan posisinya di bawah.
• <ion-tab-button tab="tab1">: Ini adalah tombol individual. Atribut tab sangat penting; nilainya ("tab1") harus cocok dengan path yang didefinisikan di file routing.
• <ion-icon> dan <ion-label>: Mengatur ikon dan teks untuk setiap tombol tab.

2. Konfigurasi Routing: tabs.router.ts

Sekarang, buka src/app/tabs/tabs.router.ts. File ini adalah otak di balik navigasi.

// ... (imports) ...

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1', // <- Ini cocok dengan atribut [tab] di HTML
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1', // <- Tab default saat pertama kali dibuka
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1', // <- Arahkan ke tabs jika URL root diakses
    pathMatch: 'full'
  }
];
// ... (export) ...

Analisis Kode:

• path: 'tabs': Mendefinisikan rute induk. Semua rute tab akan berada di bawah /tabs, misalnya /tabs/tab1.
• component: TabsPage: Memberi tahu Angular untuk memuat TabsPage (yang berisi ion-tab-bar) sebagai bingkai.
• children: [...]: Ini adalah array yang mendefinisikan setiap tab.
• path: 'tab1': Ini adalah path untuk tab pertama. Nama ini harus sama persis dengan nilai atribut tab di file tabs.page.html.
• loadChildren: ...: Ini menggunakan lazy loading untuk memuat modul dan halaman Tab1Page hanya ketika tab tersebut pertama kali diakses.
• redirectTo: '/tabs/tab1': Jika pengguna membuka /tabs tanpa menentukan tab spesifik, mereka akan otomatis diarahkan ke tab1.

Kustomisasi Sederhana

Sekarang setelah Anda memahami strukturnya, melakukan kustomisasi menjadi sangat mudah. Misalkan kita ingin mengubah Tab1 menjadi halaman “Beranda” dengan ikon rumah.

1. Ubah di tabs.page.html:
   HTML

   <ion-tab-button tab="tab1">
     <ion-icon name="home-outline"></ion-icon>
     <ion-label>Beranda</ion-label>
   </ion-tab-button>
   

2. (Opsional) Ubah Nama Path di tabs.router.ts: Jika Anda juga ingin URL-nya lebih deskriptif, ubah path di routing dan juga atribut tab di HTML.
   • Di tabs.router.ts: path: 'beranda'
   • Di tabs.page.html: tab="beranda"

Kesimpulan

Sistem navigasi tab di Ionic sangat kuat dan terstruktur dengan baik. Meskipun pada awalnya terlihat melibatkan banyak file, konsepnya sederhana: TabsPage adalah bingkai visual yang berisi ion-tab-bar, sementara tabs.router.ts adalah otak yang menentukan halaman mana yang akan dimuat ke dalam bingkai tersebut. Dengan memahami hubungan antara atribut tab di HTML dan properti path di file routing, Anda dapat dengan mudah membuat dan mengkustomisasi navigasi utama aplikasi Anda.

Di tutorial selanjutnya, kita akan membahas cara menavigasi dari satu halaman ke halaman lain secara programatik dan melalui template. Selamat mencoba!