Salah satu cara paling umum untuk menampilkan data dalam aplikasi mobile adalah menggunakan list atau daftar. Mulai dari daftar kontak, menu pengaturan, hingga feed berita, list ada di mana-mana. Ionic menyediakan komponen ion-list yang kaya fitur dan mudah digunakan untuk menangani semua kebutuhan ini.

Dalam tutorial ini, kita akan menjelajahi cara membuat berbagai jenis list di Ionic, mulai dari yang paling dasar hingga yang lebih kompleks dengan ikon, avatar, dan tombol. Mari kita mulai! 📜

Anatomi Dasar Sebuah List

Untuk membuat sebuah list di Ionic, Anda akan menggunakan beberapa komponen yang bekerja bersamaan:

• ion-list: Komponen utama yang bertindak sebagai wadah untuk seluruh daftar.
• ion-item: Merepresentasikan satu baris atau satu item di dalam daftar. Semua konten lain seperti teks, ikon, atau gambar diletakkan di dalam ion-item.
• ion-label: Komponen untuk menampilkan teks di dalam sebuah item. Menggunakan ion-label membantu Ionic menerapkan styling yang benar secara otomatis.

Mari kita lihat contoh paling sederhananya. Buka salah satu halaman Anda dan tambahkan kode berikut di dalam <ion-content>:

<ion-list>
  <ion-item>
    <ion-label>Pokémon</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Digimon</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Dragon Ball</ion-label>
  </ion-item>
</ion-list>

Hasilnya adalah daftar teks sederhana dengan garis pemisah antar item, sangat rapi dan bersih.

Mempercantik List dengan Ikon, Avatar, dan Thumbnail

Tampilan list bisa menjadi jauh lebih menarik dan informatif dengan menambahkan elemen visual. Ionic mempermudah hal ini dengan menggunakan properti slot.

List dengan Ikon

Anda dapat menambahkan ikon di awal atau akhir item menggunakan ion-icon dengan slot="start" atau slot="end".

<ion-list>
  <ion-item>
    <ion-icon name="flame-outline" slot="start" color="danger"></ion-icon>
    <ion-label>Charmander</ion-label>
  </ion-item>
  <ion-item>
    <ion-icon name="leaf-outline" slot="start" color="success"></ion-icon>
    <ion-label>Bulbasaur</ion-label>
  </ion-item>
  <ion-item>
    <ion-icon name="water-outline" slot="start" color="primary"></ion-icon>
    <ion-label>Squirtle</ion-label>
  </ion-item>
</ion-list>

List dengan Avatar

Avatar biasanya digunakan untuk menampilkan gambar profil atau ikon yang berbentuk bulat. Gunakan komponen ion-avatar.

<ion-list>
  <ion-item>
    <ion-avatar slot="start">
      <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" />
    </ion-avatar>
    <ion-label>
      <h2>Bulbasaur</h2>
      <p>Tipe: Rumput, Racun</p>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-avatar slot="start">
      <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png" />
    </ion-avatar>
    <ion-label>
      <h2>Squirtle</h2>
      <p>Tipe: Air</p>
    </ion-label>
  </ion-item>
</ion-list>

Tips: Di dalam ion-label, Anda bisa menggunakan tag HTML standar seperti <h2> untuk judul dan <p> untuk deskripsi untuk membuat hierarki teks.

Membuat List Interaktif

List tidak hanya untuk menampilkan data, tetapi juga untuk berinteraksi. Anda bisa membuat seluruh item dapat diklik atau menambahkan tombol spesifik di dalamnya.

Item yang Dapat Diklik

Untuk membuat item merespons saat disentuh (misalnya, untuk navigasi ke halaman detail), tambahkan atribut button ke ion-item.

<ion-list>
  <ion-item button="true">
    <ion-label>Pengaturan Akun</ion-label>
    <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
  </ion-item>
  <ion-item button="true">
    <ion-label>Notifikasi</ion-label>
    <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
  </ion-item>
</ion-list>

Menambahkan Tombol di Dalam Item

Jika Anda memerlukan beberapa aksi dalam satu item (misalnya, edit dan hapus), Anda bisa menyisipkan ion-button di dalamnya.

<ion-list>
  <ion-item>
    <ion-label>Laporan Bulanan</ion-label>
    <ion-button slot="end" fill="clear">
      <ion-icon slot="icon-only" name="cloud-download-outline"></ion-icon>
    </ion-button>
    <ion-button slot="end" fill="clear" color="danger">
      <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
    </ion-button>
  </ion-item>
</ion-list>

Mengelompokkan Item dengan ion-item-divider

Terkadang Anda perlu mengelompokkan item di dalam list, misalnya memisahkan kontak berdasarkan huruf awal. Gunakan ion-item-divider untuk membuat header grup.

<ion-list>
  <ion-item-divider>
    <ion-label>A</ion-label>
  </ion-item-divider>
  <ion-item>
    <ion-label>Agus</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Ana</ion-label>
  </ion-item>

  <ion-item-divider>
    <ion-label>B</ion-label>
  </ion-item-divider>
  <ion-item>
    <ion-label>Budi</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Bambang</ion-label>
  </ion-item>
</ion-list>

Kesimpulan

Komponen ion-list adalah alat yang sangat kuat dan esensial dalam pengembangan aplikasi Ionic. Anda telah belajar cara membuat daftar sederhana, mempercantiknya dengan elemen visual seperti ikon dan avatar, membuatnya interaktif, hingga mengelompokkannya secara logis. Kemampuan ini akan menjadi dasar untuk membangun hampir semua jenis antarmuka aplikasi yang perlu Anda buat.

Di tutorial selanjutnya, kita akan membahas cara menangani input pengguna menggunakan Form dan berbagai jenis kontrol input di Ionic. Selamat mencoba!