Referensi galeri komponen A2UI

Halaman ini memberikan referensi komprehensif untuk semua komponen A2UI yang tersedia, termasuk komponen tata letak, tampilan, interaktif, dan penampung, serta properti umum.

Properti Umum

Semua komponen, terlepas dari jenis spesifiknya, memiliki serangkaian properti umum yang dapat dikonfigurasi:

Properti Wajib Deskripsi
id Ya ID unik untuk komponen dalam platform saat ini.
accessibility Tidak Atribut untuk meningkatkan aksesibilitas, seperti label dan peran.
weight Tidak Nilai yang digunakan dalam tata letak Row atau Column untuk mengontrol seberapa banyak ruang yang ditempati komponen relatif terhadap saudaranya, mirip dengan flex-grow.

Untuk spesifikasi lengkap semua properti, termasuk properti umum dan khusus komponen, lihat Definisi Katalog Standar (Skema JSON).

Komponen Tata Letak

Komponen tata letak digunakan untuk menyusun dan mengatur komponen lain dalam antarmuka pengguna. Komponen tata letak berikut tersedia:

Baris

Row adalah komponen tata letak yang digunakan untuk mengatur komponen turunannya secara horizontal, dari kiri ke kanan. Tata letak ini berfungsi sebagai penampung tempat Anda dapat menempatkan beberapa komponen secara berdampingan. Jarak dan penempatan yang tepat dari turunan dalam baris dapat dikontrol menggunakan properti distribution dan alignment.

Tabel berikut menguraikan properti yang tersedia untuk komponen Row:

Properti Jenis/Nilai Deskripsi
children explicitList atau template Komponen turunan yang akan diatur secara horizontal dalam Baris.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Mengontrol cara komponen turunan didistribusikan di sepanjang sumbu horizontal.
alignment start, center, end, stretch Mengontrol cara komponen turunan diratakan pada sumbu vertikal.

JSON

{
  "id": "toolbar",
  "component": {
    "Row": {
      "children": { "explicitList": ["btn1", "btn2", "btn3"] },
      "distribution": "spaceBetween",
      "alignment": "center"
    }
  }
}

Kolom

Column adalah komponen tata letak yang digunakan untuk mengatur komponen turunannya secara vertikal, dari atas ke bawah. Tata letak ini berfungsi sebagai penampung tempat Anda dapat menempatkan beberapa komponen di bawah satu sama lain. Jarak dan posisi yang tepat dari turunan dalam kolom dapat dikontrol menggunakan properti distribution dan alignment.

Tabel berikut menguraikan properti yang tersedia untuk komponen Column:

Properti Jenis/Nilai Deskripsi
children explicitList atau template Komponen turunan yang akan disusun secara vertikal dalam Kolom.
distribution start, center, end, spaceBetween, spaceAround, spaceEvenly Mengontrol cara komponen turunan didistribusikan di sepanjang sumbu vertikal.
alignment start, center, end, stretch Mengontrol cara komponen turunan diratakan pada sumbu horizontal.

JSON

{
  "id": "content",
  "component": {
    "Column": {
      "children": { "explicitList": ["header", "body", "footer"] },
      "distribution": "start",
      "alignment": "stretch"
    }
  }
}

Daftar

List adalah komponen tata letak yang menampilkan daftar item yang dapat di-scroll. Komponen ini mendukung turunan statis dan template dinamis untuk membuat item dari data. Arah scroll dapat berupa vertikal atau horizontal.

Tabel berikut menguraikan properti yang tersedia untuk komponen List:

Properti Jenis/Nilai Deskripsi
children explicitList atau template Item yang akan ditampilkan dalam daftar.
direction vertical, horizontal Arah scroll daftar.
alignment start, center, end, stretch Mengontrol cara item daftar diratakan pada sumbu silang.

JSON

{
  "id": "message-list",
  "component": {
    "List": {
      "children": {
        "template": {
          "dataBinding": "/messages",
          "componentId": "message-item"
        }
      },
      "direction": "vertical"
    }
  }
}

Komponen Tampilan

Komponen tampilan digunakan untuk menyajikan informasi kepada pengguna. Komponen tampilan berikut tersedia:

Teks

Komponen Text menampilkan konten teks dan mendukung berbagai petunjuk gaya, seperti judul, teks, dan teks isi.

Tabel berikut menguraikan properti yang tersedia untuk komponen Text:

Properti Jenis/Nilai Deskripsi
text BoundValue Konten teks yang akan ditampilkan.
usageHint h1, h2, h3, h4, h5, caption, body Menata gaya petunjuk untuk teks.

JSON

{
  "id": "title",
  "component": {
    "Text": {
      "text": { "literalString": "Welcome to A2UI" },
      "usageHint": "h1"
    }
  }
}

Gambar

Komponen Image menampilkan gambar dari URL yang ditentukan dan menyediakan opsi untuk mengontrol kecocokan gambar dengan penampungnya.

Tabel berikut menguraikan properti yang tersedia untuk komponen Image:

Properti Jenis/Nilai Deskripsi
url BoundValue URL gambar yang akan ditampilkan.
fit String Cara gambar harus sesuai dengan containernya (misalnya, "cover").
usageHint String Petunjuk penggunaan (misalnya, "banner").

JSON

{
  "id": "hero",
  "component": {
    "Image": {
      "url": { "literalString": "https://example.com/hero.png" },
      "fit": "cover",
      "usageHint": "hero"
    }
  }
}

Ikon

Komponen Icon menampilkan ikon dari set standar yang ditentukan dalam katalog.

Tabel berikut menguraikan properti yang tersedia untuk komponen Icon:

Properti Jenis/Nilai Deskripsi
name BoundValue Nama ikon yang akan ditampilkan (misalnya, "check").

JSON

{
  "id": "check-icon",
  "component": {
    "Icon": {
      "name": { "literalString": "check" }
    }
  }
}

Pemisah

Komponen Divider menampilkan garis pemisah visual, yang dapat berupa horizontal atau vertikal.

Tabel berikut menguraikan properti yang tersedia untuk komponen Divider:

Properti Jenis/Nilai Deskripsi
axis horizontal, vertical Orientasi garis pemisah.

JSON

{
  "id": "separator",
  "component": {
    "Divider": {
      "axis": "horizontal"
    }
  }
}

Komponen Interaktif

Komponen interaktif memungkinkan Anda berinteraksi dengan aplikasi, seperti memberikan input atau memicu tindakan. Komponen interaktif berikut tersedia:

Tombol

Komponen Button adalah elemen yang dapat diklik yang memicu tindakan atau peristiwa tertentu dalam aplikasi.

Tabel berikut menguraikan properti yang tersedia untuk komponen Button:

Properti Jenis/Nilai Deskripsi
child ID Komponen ID komponen yang akan ditampilkan di dalam tombol (misalnya, komponen Teks).
primary Boolean Apakah ini tombol utama (ditekankan).
action Objek Tindakan yang akan dipicu saat tombol diklik.

JSON

{
  "id": "submit-btn",
  "component": {
    "Button": {
      "child": "submit-text",
      "primary": true,
      "action": {
        "name": "submit_form"
      }
    }
  }
}

TextField

TextField adalah komponen interaktif yang memungkinkan Anda memasukkan teks. Class ini juga mendukung validasi opsional.

Tabel berikut menguraikan properti yang tersedia untuk komponen TextField:

Properti Jenis/Nilai Deskripsi
label BoundValue Label untuk kolom teks.
text BoundValue Konten teks atau jalur terikat.
textFieldType shortText, longText, number, obscured, date Jenis kolom teks.
validationRegexp String Ekspresi reguler untuk validasi.

JSON

{
  "id": "email-input",
  "component": {
    "TextField": {
      "label": { "literalString": "Email Address" },
      "text": { "path": "/user/email" },
      "textFieldType": "shortText"
    }
  }
}

CheckBox

Komponen CheckBox adalah tombol boolean yang memungkinkan Anda mengaktifkan atau menonaktifkan setelan.

Tabel berikut menguraikan properti yang tersedia untuk komponen CheckBox:

Properti Jenis/Nilai Deskripsi
label BoundValue Label untuk kotak centang.
value BoundValue (boolean) Nilai kotak centang (benar/salah) atau jalur terikat.

JSON

{
  "id": "terms-checkbox",
  "component": {
    "CheckBox": {
      "label": { "literalString": "I agree to the terms" },
      "value": { "path": "/form/agreedToTerms" }
    }
  }
}

Penggeser

Komponen Slider memungkinkan Anda memilih nilai numerik dari rentang tertentu.

Tabel berikut menguraikan properti yang tersedia untuk komponen Slider:

Properti Jenis/Nilai Deskripsi
value BoundValue (angka) Nilai penggeser atau jalur terikat saat ini.
minValue Angka Nilai minimum rentang.
maxValue Angka Nilai maksimum rentang.

JSON

{
  "id": "volume",
  "component": {
    "Slider": {
      "value": { "path": "/settings/volume" },
      "minValue": 0,
      "maxValue": 100
    }
  }
}

DateTimeInput

Komponen DateTimeInput memungkinkan Anda memilih tanggal dan waktu.

Tabel berikut menguraikan properti yang tersedia untuk komponen DateTimeInput:

Properti Jenis/Nilai Deskripsi
value BoundValue Nilai tanggal/waktu atau jalur batas yang dipilih.
enableDate Boolean Apakah akan mengaktifkan pemilihan tanggal.
enableTime Boolean Apakah akan mengaktifkan pemilihan waktu.

JSON

{
  "id": "date-picker",
  "component": {
    "DateTimeInput": {
      "value": { "path": "/booking/date" },
      "enableDate": true,
      "enableTime": false
    }
  }
}

Pilihan Ganda

Komponen MultipleChoice memungkinkan Anda memilih satu atau beberapa opsi dari daftar.

Tabel berikut menguraikan properti yang tersedia untuk komponen MultipleChoice:

Properti Jenis/Nilai Deskripsi
options Array Objek Daftar opsi yang dapat dipilih oleh pengguna. Setiap opsi harus memiliki label dan nilai.
selections BoundValue Nilai atau jalur terikat yang dipilih.
maxAllowedSelections Angka Jumlah maksimum pilihan yang diizinkan.

JSON

{
  "id": "country-select",
  "component": {
    "MultipleChoice": {
      "options": [
        { "label": { "literalString": "USA" }, "value": "us" },
        { "label": { "literalString": "Canada" }, "value": "ca" }
      ],
      "selections": { "path": "/form/country" },
      "maxAllowedSelections": 1
    }
  }
}

Komponen Penampung

Komponen penampung digunakan untuk mengelompokkan dan mengatur komponen lain. Komponen penampung berikut tersedia:

Kartu

Komponen Card adalah penampung dengan elevasi, batas, dan padding yang mengelompokkan konten terkait.

Tabel berikut menguraikan properti yang tersedia untuk komponen Card:

Properti Jenis/Nilai Deskripsi
child ID Komponen ID komponen yang akan ditampilkan di dalam kartu.

JSON

{
  "id": "info-card",
  "component": {
    "Card": {
      "child": "card-content"
    }
  }
}

Komponen Modal adalah dialog overlay yang dipicu oleh komponen titik entri.

Tabel berikut menguraikan properti yang tersedia untuk komponen Modal:

Properti Jenis/Nilai Deskripsi
entryPointChild ID Komponen ID komponen yang memicu modal (misalnya, Tombol).
contentChild ID Komponen ID komponen yang akan ditampilkan sebagai konten modal.

JSON

{
  "id": "confirmation-modal",
  "component": {
    "Modal": {
      "entryPointChild": "open-modal-btn",
      "contentChild": "modal-content"
    }
  }
}

Tab

Komponen Tabs menyediakan antarmuka ber-tab untuk mengatur konten ke dalam panel yang dapat diganti.

Tabel berikut menguraikan properti yang tersedia untuk komponen Tabs:

Properti Jenis/Nilai Deskripsi
tabItems Array Objek Daftar tab. Setiap item harus memiliki title dan child (ID komponen).

JSON

{
  "id": "settings-tabs",
  "component": {
    "Tabs": {
      "tabItems": [
        { "title": { "literalString": "General" }, "child": "general-tab" },
        { "title": { "literalString": "Privacy" }, "child": "privacy-tab" }
      ]
    }
  }
}

Langkah berikutnya