Komponen Card adalah salah satu cara paling populer dan efektif untuk menampilkan informasi yang terorganisir dan menarik secara visual dalam aplikasi mobile. Bayangkan kartu-kartu yang sering Anda lihat di aplikasi berita, e-commerce, atau media sosial; mereka menyediakan cuplikan informasi penting dalam wadah yang mudah dicerna.

Di Ionic, ion-card menyediakan kerangka kerja yang fleksibel untuk membuat tata letak berbasis kartu yang konsisten dan responsif. Dalam tutorial ini, kita akan mempelajari cara membuat berbagai jenis kartu, menambahkan gambar, judul, teks, dan bahkan tombol aksi di dalamnya. Mari kita susun kartu-kartu kita! 🃏

Mengapa Menggunakan Card?

Kartu sangat berguna untuk:

• Mengorganisir Konten: Mengelompokkan informasi terkait menjadi satu unit visual.
• Fokus Pengguna: Menarik perhatian pengguna ke bagian tertentu dari halaman.
• Estetika Modern: Memberikan tampilan yang bersih dan modern pada aplikasi Anda.
• Aksi Cepat: Menyediakan tombol aksi yang relevan langsung di dalam kartu.

Struktur Dasar Sebuah Card

Sebuah ion-card bisa berisi berbagai komponen Ionic lainnya, tetapi biasanya mengikuti struktur dasar ini:

• ion-card: Wadah utama untuk seluruh kartu.
• ion-card-header: Bagian atas kartu, ideal untuk judul atau subjudul.
• ion-card-title: Judul utama di dalam header kartu.
• ion-card-subtitle: Subjudul atau deskripsi singkat di bawah judul.
• ion-card-content: Area utama untuk teks, gambar, atau konten lainnya.

Mari kita buat kartu sederhana. Tambahkan kode berikut di dalam <ion-content> salah satu halaman Anda:

<ion-card>
  <ion-card-header>
    <ion-card-subtitle>Tutorial Ionic</ion-card-subtitle>
    <ion-card-title>Komponen Card</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Ini adalah contoh kartu sederhana untuk menampilkan informasi.
    Card sangat bagus untuk mengorganisir konten.
  </ion-card-content>
</ion-card>

Jika Anda menjalankan ionic serve, Anda akan melihat sebuah kartu dengan judul dan teks, sudah terlihat rapi dan memiliki shadow yang elegan.

Card dengan Gambar

Kartu seringkali lebih menarik dengan gambar. Anda bisa menempatkan img di dalam atau di luar ion-card-content, tergantung di mana Anda ingin gambar muncul.

Gambar di Atas Konten

Ini adalah tata letak yang umum, di mana gambar berfungsi sebagai hero image untuk kartu.

<ion-card>
  <img alt="Pemandangan Kota Malang" src="https://example.com/malang-cityscape.jpg" />
  <ion-card-header>
    <ion-card-title>Pesona Kota Malang</ion-card-title>
    <ion-card-subtitle>Jawa Timur, Indonesia</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Malang adalah kota yang sejuk dan indah di Jawa Timur, terkenal dengan apelnya, 
    gunung-gunungnya, dan berbagai destinasi wisata menarik.
  </ion-card-content>
</ion-card>

Catatan: Ganti https://example.com/malang-cityscape.jpg dengan URL gambar yang sebenarnya atau letakkan gambar Anda di folder src/assets lalu referensikan (src="/assets/malang-cityscape.jpg").

Card dengan Daftar (List) di Dalamnya

Anda juga bisa menempatkan ion-list di dalam ion-card untuk menampilkan item-item terkait.

<ion-card>
  <ion-card-header>
    <ion-card-title>Menu Kopi</ion-card-title>
  </ion-card-header>

  <ion-list>
    <ion-item>
      <ion-icon name="cafe-outline" slot="start"></ion-icon>
      <ion-label>Espresso</ion-label>
      <ion-note slot="end">Rp 25.000</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon name="cafe-outline" slot="start"></ion-icon>
      <ion-label>Cappuccino</ion-label>
      <ion-note slot="end">Rp 30.000</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon name="cafe-outline" slot="start"></ion-icon>
      <ion-label>Latte</ion-label>
      <ion-note slot="end">Rp 30.000</ion-note>
    </ion-item>
  </ion-list>
</ion-card>

Di sini, kita menggunakan ion-note untuk menampilkan harga di sisi kanan setiap item.

Card dengan Tombol Aksi

Kartu seringkali memerlukan tombol untuk interaksi, seperti “Baca Selengkapnya”, “Lihat Profil”, atau “Beli Sekarang”. Anda bisa menempatkan ion-button langsung di dalam ion-card-content atau menggunakan ion-card-actions (tersedia di Ionic 6 ke atas) untuk penempatan yang lebih terstruktur.

Tombol Aksi Sederhana

<ion-card>
  <ion-card-header>
    <ion-card-title>Destinasi Wisata</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <p>Jelajahi keindahan Pantai Balekambang di Malang Selatan.</p>
    <ion-button expand="block" fill="solid" color="primary" routerLink="/detail-pantai">
      Lihat Detail
    </ion-button>
  </ion-card-content>
</ion-card>

• expand="block": Membuat tombol mengisi seluruh lebar kartu.
• routerLink: (Jika menggunakan Angular) Atribut ini digunakan untuk navigasi ke halaman lain.

Mengelompokkan Tombol Aksi (ion-card-actions)

Untuk Ionic 6+, Anda bisa menggunakan ion-card-actions untuk menempatkan tombol di bagian bawah kartu, mirip dengan footer khusus kartu.

<ion-card>
  <ion-card-header>
    <ion-card-title>Berita Terkini</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <p>Pemerintah Kota Malang mengadakan festival budaya akhir pekan ini.</p>
  </ion-card-content>

  <ion-card-actions>
    <ion-button fill="clear">Bagikan</ion-button>
    <ion-button fill="clear">Baca Selengkapnya</ion-button>
  </ion-card-actions>
</ion-card>

Kesimpulan

Komponen ion-card adalah salah satu elemen UI yang paling serbaguna dan efektif di Ionic. Dengan kartu, Anda dapat menampilkan informasi dengan cara yang menarik, terstruktur, dan mudah dipahami oleh pengguna. Anda telah belajar cara membuat kartu sederhana, menambahkan gambar, menyisipkan daftar, dan menyertakan tombol aksi untuk interaksi.

Poin Kunci untuk Diingat:

• ✅ ion-card sebagai wadah utama.
• ✅ Gunakan ion-card-header, ion-card-title, ion-card-subtitle untuk judul.
• ✅ ion-card-content untuk isi utama kartu (teks, gambar, dll).
• ✅ Manfaatkan slot dan komponen lain seperti ion-img, ion-list, dan ion-button di dalamnya.
• ✅ Untuk Ionic 6+, ion-card-actions adalah cara yang bagus untuk mengelompokkan tombol di footer kartu.

Di tutorial selanjutnya, kita akan membahas mengenai Form Input lebih lanjut untuk menangani berbagai jenis masukan dari pengguna. Selamat membuat kartu yang indah!