# 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

  <figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FpdEvs3YA1uBfyvk3nMbw%2Flist2edit.png?alt=media&#x26;token=96d5cc24-5e83-4242-967f-d5f62b693b54" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka list *card component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FUnR2myZeOKBjLaICgqQp%2Flist22.png?alt=media&#x26;token=41a9d1a9-1c5a-40eb-8728-437fc80c2ecc" alt=""><figcaption></figcaption></figure>

Properties dari list card component adalah&#x20;

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

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FtbbhAeKfGMUUUy8jtBqU%2Flist22ed.png?alt=media&#x26;token=e1ec33be-5316-48f6-9fc1-3e2d1be42d55" alt=""><figcaption></figcaption></figure>