List Card

Cara menambahkan List Card component

Berikut langkah-langkah untuk menambahkan list component

• Buka Qore App Editor

• Pada tab library, di section list pilih list card component. Terdapat 2 cara untuk menambahkan component ke dalam emulator

  • Jika ingin menambahkan component langsung ke suatu page, kamu dapat double-click card tersebut

  • Jika ingin menambahkan component ke dalam salah satu kontainer di page tersebut, kamu dapat drag and drop ke dalam kontainer yang diinginkan

  

• Jika berhasil maka list card component akan muncul di emulator editor screen seperti berikut

Properties dari list card component adalah

Data :

• Source : tabel yang akan digunakan sebagai sumber data

• Limit : batas data yang akan diretrieve, defaultnya adalah 50. Pengguna juga dapat menentukan sendiri batas dengan custom limit.

Design :

• List title : sebagai judul atau keterangan list

• Title : sebagai judul item list

• Label : seperti tag, label digunakan untuk mengelompokkan list card berdasar kategori tertentu

• Description : menunjukkan keterangan atau deskripsi singkat mengenai list card

• Caption : isi dari item list

• Image : sumber gambar pada list card, dapat berupa baris pada qore data ataupun link gambar

• Display : mengatur jumlah item list yang ditampilkan, apakah semua, infinite scroll, atau menggunakan pagination. Jika menggunakan pagination, atur jumlah limit untuk setiap page

Thumbnail :

• Avatar : sumber gambar untuk thumbnail yang akan muncul sebagai gambar kecil, bisa berupa link gambar atau baris dalam qore data

• Icon : menambahkan icon pada list, dapat dengan memilih icon yang telah tersedia ataupun mengunggah gambar

• Icon style : mengatur gaya tampilan dari icon

• Size : mengatur ukuran list card, apakah half size atau full size jika ingin lebih lebar

• Style : mengatur style tampilan dari list card, apakah default, card, atau overlay

• Round : mengatur bentuk card, apakah menggunakan round atau tidak

Empty state :

• Title : judul dari list ketika dalam kondisi kosong

• Subtitle : keterangan lebih detail mengenai kondisi list yang kosong, misalnya "Anda tidak memiliki data apapun"

• Image : Gambar ketika list dalam kondisi kosong

Berikut contoh list card yang telah dimodifikasi