# Horizontal Tile

Cara menambahkan Horizontal Tile component

Berikut langkah-langkah untuk menambahkan horizontal tile *component*

* Buka Qore App Editor 

* Pada tab library, di section list pilih horizontal tile *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%2FQUZLPd1BaEREHhogfOj5%2Flist3.png?alt=media&#x26;token=38650676-6f81-41cf-ba8e-f2ea6f77d7b6" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka horizontal tile *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%2FfSMVVw6Pvm48LKonQgQY%2Flist32.png?alt=media&#x26;token=fbacd286-23ae-4cb5-b620-827a56437c72" alt=""><figcaption></figcaption></figure>

Properties dari horizontal tile component adalah&#x20;

Data :

* Source : tabel yang akan digunakan sebagai sumber data

Design :

* Header : 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

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

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FlCqoTPzRRA0B83guG7gH%2Flist33.png?alt=media&#x26;token=5a490692-04dd-4f9e-a722-5c2755444889" alt=""><figcaption></figcaption></figure>