Qore Docs
  • What is Qore?
  • Getting Started
    • Start Exploring
    • Qorebase
      • Table & View
      • View Insight
      • Field Types
      • Manage Data (Import & Export)
      • Role & Permission
      • Filter & Sort
    • Qore App
      • Pages
      • Settings
      • Component
    • Create Workflow
  • ACCOUNT
    • Account Setting
  • Project
    • Manage Project
      • Create New Project
      • Customize Project
      • Delete Project
  • Table
    • Manage Table
      • Users Table
      • Create Table
      • Rename Table
      • Delete Table
      • Manage Row
    • Manage Views
      • Create Views
      • Rename Views
      • Delete View
    • Manage Field
      • Create Field
      • Update Field
      • Delete Field
    • Field Type
    • Modify Table
      • Sort
      • Filter
      • Dynamic Filter
      • Hide and Show Field
  • Component
    • Text
      • Text
      • Description Text
      • Rich Text
      • Hint Text
      • Paragraph Text
    • Media
      • Headline
      • Image
      • Embed
      • QR Code Generator
      • Barcode Generator
      • Carousel
    • List
      • List
      • List Card
      • Horizontal Tile
      • Vertical Tile
    • Button
      • Button
      • Button Bar
      • Menu Grid
      • Icon Button
      • Floating Button
    • Custom Component
      • Props
      • Example
  • FAQ
    • How to display Image in Qore App
      • Gallery Component
      • Headline Component
      • Image Component
      • Horizontal Tile Component
      • List Component
      • List Card Component
      • Vertical Tile Component
    • How to display filtered data from table
    • How to filter data on table/view
      • Save configuration filter on table/view
  • Usecase
    • Create list of restaurant menu
Powered by GitBook
On this page
  1. Component
  2. List

List Card

PreviousListNextHorizontal Tile

Last updated 2 years ago

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