# List

Cara menambahkan List component

Berikut langkah-langkah untuk menambahkan list *component*

* Buka Qore App Editor 
* Pada tab library, di section list pilih list *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%2FSHHn3n7VUwBoZXocLwd8%2Flist.png?alt=media&#x26;token=ed06cf0a-0563-4f09-9d49-05f2fb134c0e" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka list *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%2FGYpWRFgjLPINThYuGWyP%2Flistedit.png?alt=media&#x26;token=544185b8-6031-4ae3-bf5b-da625a46f36f" alt=""><figcaption></figcaption></figure>

Properties dari list 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 :

* Header : sebagai judul atau keterangan list
* Title : sebagai judul item list
* Subtitle : keterangan lebih detail dari title item list
* Caption : isi dari item list
* Icon : menambahkan icon pada list, dapat dengan memilih icon yang telah tersedia ataupun mengunggah gambar
* Style : memilih gaya untuk item list, apakah dengan gaya card atau tidak
* Display : mengatur jumlah item list yang ditampilkan, apakah semua, infinite scroll, atau menggunakan pagination. Jika menggunakan pagination, atur jumlah limit untuk setiap page

Thumbnail :

* Source : sumber gambar untuk thumbnail, bisa berupa link gambar
* Position : mengatur peletakan thumbnail, apakah rata kanan atau kiri
* Shape : mengatur bentuk thumbnail, apakah square, rounded, ataupun circle

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 yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FluHnroIzxcLys4lzf8u5%2Flistedit2.png?alt=media&#x26;token=eeaaec56-dcf9-40ac-ab73-e6c194a77876" alt=""><figcaption></figcaption></figure>