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.

Komponen katalog material dan komponen katalog dasar

A2UI menyediakan dua katalog komponen berbeda untuk membangun antarmuka pengguna agen: katalog material dan katalog dasar.

Katalog material berisi komponen yang dirancang khusus untuk mematuhi pedoman Desain Material Google, yang menawarkan serangkaian elemen UI yang lebih kaya dan bergaya yang didukung dalam konfigurasi A2UI v0.9.

Katalog dasar berisi primitif UI standar yang tidak bergantung pada sistem desain, seperti tata letak, tindakan, dan input, yang didukung dalam konfigurasi A2UI v0.9 dan v0.8.

Komponen katalog material

Bagian ini memberikan referensi untuk komponen Desain Material A2UI yang tersedia, termasuk komponen tata letak, tampilan, navigasi, dan input.

Properti umum katalog material

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 MaterialRow atau MaterialColumn untuk mengontrol seberapa banyak ruang yang ditempati komponen relatif terhadap saudaranya, mirip dengan flex-grow.

Komponen tata letak katalog material

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

MaterialCard

Penampung kartu Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialCard:

Properti Wajib Nilai Default Deskripsi
children Ya - Menentukan ID turunan.
appearance Tidak raised Gaya tampilan kartu. Salah satu dari: "outlined", "raised".
align Tidak start Penyelarasan anak. Salah satu dari: "center", "end", "start", "stretch".
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
href Tidak - URL opsional untuk membuka halaman saat kartu diklik. Jika disetel, kartu akan menjadi interaktif dan membuka URL di tab baru.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

Penampung tata letak yang mengatur item secara vertikal menggunakan panduan Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialColumn:

Properti Wajib Nilai Default Deskripsi
children Ya - Menentukan ID turunan.
justify Tidak start Menentukan susunan turunan di sepanjang sumbu utama (secara vertikal).
align Tidak stretch Perataan horizontal turunan ("start", "center", "end", "stretch").
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "demo-column-header",
      "demo-column-content",
      "demo-column-footer"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "demo-column-header",
    "component": "MaterialText",
    "text": "Header",
    "usageHint": "h2"
  },
  {
    "id": "demo-column-content",
    "component": "MaterialText",
    "text": "Content goes here",
    "usageHint": "body"
  },
  {
    "id": "demo-column-footer",
    "component": "MaterialText",
    "text": "Footer",
    "usageHint": "caption"
  }
]

MaterialDialog

Penampung dialog menu Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialDialog:

Properti Wajib Nilai Default Deskripsi
open Tidak false Apakah dialog terbuka. Dapat berupa boolean literal atau referensi data binding.
title Tidak - Judul dialog.
disableClose Tidak false Apakah pengguna dapat menutup dialog dengan mengklik di luar atau menekan Escape.
width Tidak - Lebar dialog (misalnya, "500px").
height Tidak - Tinggi dialog (misalnya, "400px").
children Ya - Menentukan ID turunan.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "color": "warn",
    "action": {
      "event": {
        "name": "requestDelete"
      }
    }
  },
  {
    "id": "confirmation-dialog",
    "component": "MaterialDialog",
    "open": {
      "path": "/app/dialogOpen"
    },
    "title": "Delete Confirmation",
    "children": [
      "dialog-layout"
    ]
  },
  {
    "id": "dialog-layout",
    "component": "MaterialColumn",
    "children": [
      "dialog-text",
      "dialog-actions"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "dialog-text",
    "component": "MaterialText",
    "text": "Are you sure you want to permanently delete this item?"
  },
  {
    "id": "dialog-actions",
    "component": "MaterialRow",
    "children": [
      "cancel-button",
      "confirm-button"
    ],
    "justify": "end",
    "align": "center"
  },
  {
    "id": "cancel-button",
    "component": "MaterialButton",
    "label": "Cancel",
    "variant": "basic",
    "action": {
      "event": {
        "name": "closeDialog"
      }
    }
  },
  {
    "id": "confirm-button",
    "component": "MaterialButton",
    "label": "Delete",
    "variant": "raised",
    "color": "warn",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Garis pemisah Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialDivider:

Properti Wajib Nilai Default Deskripsi
inset Tidak false Apakah pembagi disisipkan.
vertical Tidak false Apakah pemisah vertikal.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "text-above",
      "divider",
      "text-below"
    ],
    "justify": "start",
    "align": "stretch"
  },
  {
    "id": "text-above",
    "component": "MaterialText",
    "text": "This is the content above the divider."
  },
  {
    "id": "divider",
    "component": "MaterialDivider",
    "inset": false,
    "vertical": false
  },
  {
    "id": "text-below",
    "component": "MaterialText",
    "text": "This is the content below the divider."
  }
]

MaterialExpansionPanel

Penampung panel perluasan Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialExpansionPanel:

Properti Wajib Nilai Default Deskripsi
title Tidak - Judul yang ditampilkan di header panel perluasan.
description Tidak - Deskripsi yang ditampilkan di header panel ekspansi.
expanded Tidak false Apakah panel diluaskan. Dapat berupa boolean literal atau referensi data binding.
disabled Tidak false Apakah panel ekspansi dinonaktifkan.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
children Ya - Menentukan ID turunan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialExpansionPanel",
    "title": "Advanced Options",
    "description": "Configure advanced settings",
    "expanded": false,
    "children": [
      "panel-content"
    ]
  },
  {
    "id": "panel-content",
    "component": "MaterialText",
    "text": "Advanced settings content goes here"
  }
]

MaterialGridList

Komponen penampung A2UI untuk tata letak petak. Menggunakan Daftar Petak Angular Material untuk mengatur komponen turunan ke dalam kartu.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialGridList:

Properti Wajib Nilai Default Deskripsi
children Ya - Menentukan ID turunan.
cols Tidak 2 Jumlah kolom dalam daftar petak. Dapat berupa angka literal atau referensi data binding.
rowHeight Tidak 1:1 Rasio tinggi baris atau tinggi tetap (misalnya, "100px"). Dapat berupa string literal atau referensi data binding.
gutterSize Tidak 1px Ukuran ruang antar-petak. Dapat berupa string literal atau referensi data binding.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialGridList",
    "cols": 2,
    "rowHeight": "1:1",
    "gutterSize": "8px",
    "children": [
      "card-a",
      "card-b",
      "card-c",
      "card-d"
    ]
  },
  {
    "id": "card-a",
    "component": "MaterialCard",
    "children": [
      "text-a"
    ]
  },
  {
    "id": "text-a",
    "component": "MaterialText",
    "text": "Card A"
  },
  {
    "id": "card-b",
    "component": "MaterialCard",
    "children": [
      "text-b"
    ]
  },
  {
    "id": "text-b",
    "component": "MaterialText",
    "text": "Card B"
  },
  {
    "id": "card-c",
    "component": "MaterialCard",
    "children": [
      "text-c"
    ]
  },
  {
    "id": "text-c",
    "component": "MaterialText",
    "text": "Card C"
  },
  {
    "id": "card-d",
    "component": "MaterialCard",
    "children": [
      "text-d"
    ]
  },
  {
    "id": "text-d",
    "component": "MaterialText",
    "text": "Card D"
  }
]

MaterialRow

Penampung tata letak yang mengatur item secara horizontal menggunakan panduan Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialRow:

Properti Wajib Nilai Default Deskripsi
children Ya - Menentukan ID turunan.
justify Tidak start Menentukan susunan turunan di sepanjang sumbu utama (horizontal).
align Tidak stretch Perataan vertikal elemen turunan ("start", "center", "end", "stretch").
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialRow",
    "children": [
      "item-icon",
      "item-details",
      "item-action"
    ],
    "justify": "spaceBetween",
    "align": "center"
  },
  {
    "id": "item-icon",
    "component": "MaterialIcon",
    "icon": "shopping_bag",
    "color": "primary"
  },
  {
    "id": "item-details",
    "component": "MaterialColumn",
    "children": [
      "item-title",
      "item-subtitle"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "item-title",
    "component": "MaterialText",
    "text": "Premium Wireless Headphones",
    "usageHint": "subtitle1"
  },
  {
    "id": "item-subtitle",
    "component": "MaterialText",
    "text": "$299.99 \u2022 Active Noise Cancelling",
    "usageHint": "caption"
  },
  {
    "id": "item-action",
    "component": "MaterialButton",
    "label": "Buy Now",
    "variant": "raised",
    "action": {
      "event": {
        "name": "buy_clicked"
      }
    }
  }
]

Komponen konten katalog material

Komponen tampilan dan konten digunakan untuk menyajikan informasi, media, dan status kepada pengguna.

MaterialBadge

Menampilkan badge Desain Material di atas elemen turunan.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialBadge:

Properti Wajib Nilai Default Deskripsi
text Tidak - Konten teks yang akan ditampilkan di badge.
color Tidak - Palet warna badge ("primary", "accent", "warn").
position Tidak above after Posisi badge relatif terhadap penampung ("above after", "above before", "below after", "below before").
size Tidak medium Ukuran badge ("small", "medium", "large").
overlap Tidak true Apakah badge harus tumpang-tindih dengan penampungnya.
disabled Tidak false Apakah badge dinonaktifkan.
hidden Tidak false Apakah badge disembunyikan.
description Tidak - Deskripsi yang dapat diakses untuk badge.
children Ya - Menentukan ID turunan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

Menampilkan ikon Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialIcon:

Properti Wajib Nilai Default Deskripsi
icon Ya - Nama Ikon Material yang akan ditampilkan.
color Tidak - Palet warna ikon (primer, aksen, peringatan).
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

Komponen A2UI untuk merender gambar dalam konteks Desain Material. Mendukung properti sudut bulat, rasio aspek, dan object-fit.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialImage:

Properti Wajib Nilai Default Deskripsi
url Ya - URL gambar yang akan ditampilkan.
alt Tidak - Teks alternatif yang dapat diakses untuk gambar.
fit Tidak - Menentukan cara ukuran gambar diubah agar sesuai dengan penampungnya. Salah satu dari: "fill", "contain", "cover", "scaleDown", "none".
width Tidak - Lebar kustom gambar (misalnya, "100px", "100%").
height Tidak - Tinggi kustom gambar (misalnya, "100px", "100%").
aspectRatio Tidak - Rasio aspek kustom gambar (misalnya, "16/9", "1").
roundedCorners Tidak false Apakah akan menerapkan sudut membulat standar Desain Material.
borderRadius Tidak - Radius batas kustom gambar (misalnya, "50%", "12 piksel"). Menggantikan roundedCorners.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialImage",
    "url": "https://www.gstatic.com/marketing-cms/assets/images/c5/3a/200414104c669203c62270f7884f/google-wordmarks-2x.webp=n-w100-h32-fcrop64=1,00000000ffffffff-rw",
    "width": "100px",
    "height": "32px",
    "fit": "scaleDown",
    "roundedCorners": true,
    "alt": "Google Wordmark"
  }
]

MaterialProgressBar

Wrapper A2UI untuk komponen Progress Bar Angular Material. Mendukung mode determinan, tidak determinan, buffer, dan kueri.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialProgressBar:

Properti Wajib Nilai Default Deskripsi
value Tidak 0 Nilai progres (0 hingga 100) dalam mode buffer dan determinan.
mode Tidak determinate Mode status progres. Salah satu dari: "determinate", "indeterminate", "buffer", "query".
bufferValue Tidak 0 Nilai buffer (0 hingga 100) dalam mode buffer.
color Tidak - Palet warna status progres ("primary", "accent", "warn").
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Wrapper A2UI untuk komponen Angular Material Progress Spinner. Mendukung mode deterministik dan non-deterministik, serta dimensi kustom.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialProgressSpinner:

Properti Wajib Nilai Default Deskripsi
value Tidak 0 Nilai progres (0 hingga 100) dalam mode determinan.
mode Tidak determinate Mode spinner. Salah satu dari: "determinate", "indeterminate".
diameter Tidak 40 Diameter pemutar progres dalam piksel.
strokeWidth Tidak 4 Lebar goresan spinner dalam piksel.
color Tidak - Palet warna spinner ("primary", "accent", "warn").
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Wrapper A2UI untuk komponen Tabel Angular Material. Merender data terstruktur ke dalam kolom dan baris.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialTable:

Properti Wajib Nilai Default Deskripsi
columns Ya - Array definisi kolom, yang masing-masing menentukan objek {header, field}.
rows Ya - Daftar baris data. Dapat berupa array rekaman kunci-nilai atau referensi data binding.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
caption Tidak - Teks/deskripsi yang dapat diakses untuk tabel.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

Menampilkan teks dengan tipografi Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialText:

Properti Wajib Nilai Default Deskripsi
text Ya - Teks yang akan ditampilkan. Nilai ini dapat berupa string literal atau referensi ke nilai dalam model data.
usageHint Tidak body Petunjuk untuk gaya tipografi. Salah satu dari: "h1", "h2", "h3", "h4", "h5", "subtitle1", "subtitle2", "body1", "body2", "body", "caption".
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Komponen navigasi katalog material

Komponen navigasi dan tindakan memungkinkan pengguna melakukan tindakan atau berpindah antar-tampilan.

MaterialButton

Tombol Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialButton:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label teks yang akan ditampilkan di tombol.
leadingIcon Tidak - Nama Ikon Material yang akan ditampilkan sebelum label.
trailingIcon Tidak - Nama Ikon Material yang akan ditampilkan setelah label.
color Tidak - Palet warna tombol (primer, aksen, peringatan).
variant Tidak basic Varian gaya tombol. Salah satu dari: "raised", "flat", "stroked", "basic".
disabled Tidak false Apakah tombol dinonaktifkan.
action Tidak - Tindakan sisi klien yang akan dikirim saat tombol diklik.
tooltip Tidak - Teks tooltip yang akan ditampilkan saat kursor diarahkan.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Tombol ikon Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialIconButton:

Properti Wajib Nilai Default Deskripsi
icon Ya - Nama Ikon Material yang akan ditampilkan.
action Ya - Tindakan sisi klien yang akan dikirim saat tombol ikon diklik.
ariaLabel Ya - Teks yang dapat dibaca oleh pembaca layar. Diperlukan untuk aksesibilitas.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
color Tidak - Palet warna tombol (primer, aksen, peringatan).
disabled Tidak false Apakah tombol dinonaktifkan.
tooltip Tidak - Teks tooltip yang akan ditampilkan saat kursor diarahkan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Wrapper A2UI untuk komponen Menu Angular Material. Menyediakan tombol pemicu dan item menu drop-down.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialMenu:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label teks yang ditampilkan pada tombol pemicu menu.
icon Tidak - Nama Ikon Material yang akan ditampilkan di tombol pemicu.
disabled Tidak false Apakah tombol pemicu menu dinonaktifkan.
value Tidak - Nilai yang saat ini dipilih. Dapat berupa string literal atau referensi data binding.
options Ya - Daftar opsi menu yang tersedia. Dapat berupa array objek {label, value} atau referensi data binding.
action Tidak - Tindakan sisi klien yang akan dikirim saat item menu dipilih.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialMenu",
    "label": "Options",
    "icon": "more_vert",
    "value": {
      "path": "/menu/selectedOption"
    },
    "options": [
      {
        "label": "Settings",
        "value": "settings"
      },
      {
        "label": "Help",
        "value": "help"
      },
      {
        "label": "Logout",
        "value": "logout"
      }
    ],
    "action": {
      "event": {
        "name": "menuSelection"
      }
    }
  }
]

MaterialTabs

Wrapper A2UI untuk komponen Tab Angular Material. Merender navigasi bertab dan mengelola pilihan tab aktif.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialTabs:

Properti Wajib Nilai Default Deskripsi
tabs Ya - Array definisi tab, yang masing-masing menentukan objek {label, content}.
activeTab Tidak 0 Indeks berbasis 0 dari tab yang saat ini aktif. Dapat berupa angka literal atau referensi data binding.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Komponen input katalog material

Komponen input dan formulir memungkinkan pengguna memasukkan teks, membuat pilihan, dan mengaktifkan/menonaktifkan opsi.

MaterialButtonToggle

Grup tombol alih Desain Material untuk pemilihan tunggal.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialButtonToggle:

Properti Wajib Nilai Default Deskripsi
value Tidak - Nilai yang saat ini dipilih. Nilai ini dapat berupa string literal atau referensi ke nilai dalam model data.
options Ya - Daftar opsi yang tersedia untuk dipilih. Dapat berupa array objek {label, value} atau referensi data binding.
disabled Tidak false Apakah grup tombol beralih dinonaktifkan.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
appearance Tidak standard Gaya tampilan grup tombol beralih. Salah satu dari: "legacy", "standard".
vertical Tidak false Apakah grup tombol beralih diatur secara vertikal.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialButtonToggle",
    "ariaLabel": "Text alignment",
    "value": {
      "path": "/user/alignment"
    },
    "options": [
      {
        "label": "Left",
        "value": "left"
      },
      {
        "label": "Center",
        "value": "center"
      },
      {
        "label": "Right",
        "value": "right"
      }
    ]
  }
]

MaterialCheckbox

Komponen kotak centang Desain Material untuk status boolean. Untuk aksesibilitas yang optimal, berikan label deskriptif atau gunakan ariaLabel untuk teknologi pendukung.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialCheckbox:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label teks yang ditampilkan di samping kotak centang.
checked Tidak false Apakah kotak centang dicentang. Nilai ini dapat berupa boolean literal atau referensi ke nilai dalam model data.
disabled Tidak false Apakah kotak centang dinonaktifkan.
required Tidak false Apakah kotak centang wajib diisi.
color Tidak - Palet warna kotak centang ("primary", "accent", "warn").
labelPosition Tidak after Posisi label relatif terhadap kotak centang ("before", "after").
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
tooltip Tidak - Teks tooltip yang akan ditampilkan saat kursor diarahkan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

Komponen listbox chip Desain Material untuk pilihan tunggal.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialChips:

Properti Wajib Nilai Default Deskripsi
value Tidak - Nilai yang saat ini dipilih. Nilai ini dapat berupa string literal atau referensi ke nilai dalam model data.
options Ya - Daftar opsi chip. Dapat berupa array objek {label, value} atau referensi data binding.
disabled Tidak false Apakah kotak daftar chip dinonaktifkan.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialChips",
    "ariaLabel": "Filter by status",
    "value": {
      "path": "/user/status"
    },
    "options": [
      {
        "label": "All",
        "value": "all"
      },
      {
        "label": "Active",
        "value": "active"
      },
      {
        "label": "Completed",
        "value": "completed"
      }
    ]
  }
]

MaterialDatepicker

Komponen pemilih tanggal Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialDatepicker:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label untuk kolom pemilih tanggal.
placeholder Tidak - Teks placeholder.
value Tidak - Tanggal yang saat ini dipilih dalam format ISO.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
disabled Tidak false Apakah pemilih tanggal dinonaktifkan.
required Tidak false Apakah pemilihan tanggal diperlukan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Kolom input teks Desain Material.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialInput:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label untuk kolom input.
placeholder Tidak - Teks placeholder.
value Tidak - Nilai input saat ini. Nilai ini dapat berupa string literal atau referensi ke nilai dalam model data.
disabled Tidak false Apakah input dinonaktifkan.
name Tidak - Nama elemen input.
readonly Tidak false Apakah input bersifat hanya baca.
required Tidak false Apakah input wajib diisi.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
type Tidak text Jenis input. Salah satu dari: "text", "number", "password", "email", "tel", "url".
validationRegexp Tidak - Ekspresi reguler untuk validasi input.
checks Tidak - Pemeriksaan validasi input.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Wrapper A2UI untuk komponen Tombol Pilihan Angular Material. Mendukung pilihan tunggal dari daftar opsi dalam grup tombol pilihan.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialRadioButton:

Properti Wajib Nilai Default Deskripsi
value Tidak - Nilai yang saat ini dipilih. Dapat berupa string literal atau referensi data binding.
options Ya - Daftar opsi radio yang tersedia. Dapat berupa array objek {label, value} atau referensi data binding.
disabled Tidak false Apakah grup radio dinonaktifkan.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
color Tidak - Palet warna tombol pilihan ("primary", "accent", "warn").
labelPosition Tidak after Posisi label relatif terhadap tombol pilihan. Salah satu dari: "before", "after".
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialRadioButton",
    "ariaLabel": "Delivery options",
    "value": {
      "path": "/order/deliverySpeed"
    },
    "options": [
      {
        "label": "Standard",
        "value": "standard"
      },
      {
        "label": "Express",
        "value": "express"
      },
      {
        "label": "Next Day",
        "value": "nextDay"
      }
    ],
    "color": "primary",
    "labelPosition": "after"
  }
]

MaterialSelect

Komponen pemilihan (drop-down) Desain Material untuk pemilihan tunggal. Untuk aksesibilitas yang optimal, selalu berikan label deskriptif atau gunakan aria-label untuk teknologi pendukung.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialSelect:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label untuk kolom pilihan.
placeholder Tidak - Teks placeholder yang ditampilkan saat tidak ada nilai yang dipilih.
value Tidak - Nilai yang dipilih saat ini. Nilai ini dapat berupa string literal atau referensi ke nilai dalam model data.
options Ya - Daftar opsi yang tersedia untuk dipilih. Dapat berupa array objek {label, value} atau referensi data binding.
disabled Tidak false Apakah komponen pilihan dinonaktifkan.
required Tidak false Apakah suatu nilai wajib diisi.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialSelect",
    "label": "Favorite Color",
    "placeholder": "Choose a color",
    "ariaLabel": "Select your favorite color",
    "value": {
      "path": "/user/favoriteColor"
    },
    "options": [
      {
        "label": "Red",
        "value": "red"
      },
      {
        "label": "Green",
        "value": "green"
      },
      {
        "label": "Blue",
        "value": "blue"
      }
    ]
  }
]

MaterialSlideToggle

Wrapper A2UI untuk komponen Tombol Geser Angular Material. Mendukung binding tombol boolean dan atribut aksesibilitas kustom.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialSlideToggle:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label teks yang ditampilkan di samping tombol geser.
checked Tidak false Apakah tombol geser dicentang. Dapat berupa boolean literal atau referensi data binding.
disabled Tidak false Apakah tombol geser dinonaktifkan.
required Tidak false Apakah tombol geser diperlukan.
color Tidak - Palet warna tombol ("primary", "accent", "warn").
labelPosition Tidak after Posisi label relatif terhadap tombol ("before", "after").
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
tooltip Tidak - Teks tooltip yang akan ditampilkan saat kursor diarahkan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Wrapper A2UI untuk komponen Penggeser Angular Material. Mendukung pemilihan nilai numerik dan batasan rentang.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialSlider:

Properti Wajib Nilai Default Deskripsi
value Tidak 0 Nilai penggeser saat ini. Dapat berupa angka literal atau referensi data binding.
min Tidak 0 Nilai minimum penggeser.
max Tidak 100 Nilai maksimum penggeser.
step Tidak 1 Kenaikan langkah penggeser.
disabled Tidak false Apakah penggeser dinonaktifkan.
color Tidak - Palet warna penggeser ("primary", "accent", "warn").
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

Wrapper A2UI untuk komponen Pemilih Waktu Angular Material. Mendukung pemilihan waktu dan integrasi kolom formulir.

Tabel berikut menguraikan properti yang tersedia untuk komponen MaterialTimepicker:

Properti Wajib Nilai Default Deskripsi
label Tidak - Label teks untuk kolom pemilih waktu.
placeholder Tidak - Teks placeholder.
value Tidak - Waktu yang saat ini dipilih dalam format ISO. Dapat berupa string literal atau referensi data binding.
ariaLabel Tidak - Teks yang dapat dibaca oleh pembaca layar. Direkomendasikan untuk aksesibilitas jika tidak ada label yang terlihat.
ariaLabelledby Tidak - Mengidentifikasi elemen (atau elemen) yang memberi label pada elemen saat ini. Digunakan untuk aksesibilitas.
ariaDescribedby Tidak - Mengidentifikasi elemen (atau elemen) yang menjelaskan elemen saat ini. Digunakan untuk aksesibilitas.
disabled Tidak false Apakah pemilih waktu dinonaktifkan.
required Tidak false Apakah pemilihan waktu diperlukan.
style Tidak - Gaya inline yang akan diterapkan ke elemen.
weight Tidak - Bobot tata letak untuk elemen saat ditempatkan dalam penampung fleksibel. 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

Komponen katalog dasar

Bagian ini memberikan referensi untuk komponen katalog dasar A2UI yang tersedia.

File skema katalog dasar

Untuk mengetahui informasi selengkapnya tentang properti ini, lihat:

Properti umum katalog dasar

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.

Komponen tata letak katalog dasar

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 pemosisian yang tepat dari turunan dalam baris dapat dikontrol menggunakan properti justify/distribution dan align/alignment.

Tabel berikut menguraikan properti yang tersedia untuk komponen Row:

Properti Jenis/Nilai Deskripsi
children v0.9: Array ID komponen atau definisi template
v0.8: explicitList atau template 		Komponen turunan yang akan diatur secara horizontal dalam Baris.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Mengontrol cara komponen turunan didistribusikan di sepanjang sumbu horizontal.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Mengontrol cara komponen turunan diratakan pada sumbu vertikal.

JSON v0.9

{
  "id": "toolbar",
  "component": "Row",
  "children": ["btn1", "btn2", "btn3"],
  "justify": "spaceBetween",
  "align": "center"
}

JSON v0.8

{
  "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 pemosisian yang tepat dari turunan dalam kolom dapat dikontrol menggunakan properti justify/distribution dan align/alignment.

Tabel berikut menguraikan properti yang tersedia untuk komponen Column:

Properti Jenis/Nilai Deskripsi
children v0.9: Array ID komponen atau definisi template
v0.8: explicitList atau template 		Komponen turunan yang akan disusun secara vertikal dalam Kolom.
justify (v0.9)
distribution (v0.8) 		start, center, end, spaceBetween, spaceAround, spaceEvenly Mengontrol cara komponen turunan didistribusikan di sepanjang sumbu vertikal.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Mengontrol cara komponen turunan diratakan pada sumbu horizontal.

JSON v0.9

{
  "id": "content",
  "component": "Column",
  "children": ["header", "body", "footer"],
  "justify": "start",
  "align": "stretch"
}

JSON v0.8

{
  "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 v0.9: Array ID komponen atau definisi template
v0.8: explicitList atau template 		Item yang akan ditampilkan dalam daftar.
direction vertical, horizontal Arah scroll daftar.
align (v0.9)
alignment (v0.8) 		start, center, end, stretch Mengontrol cara item daftar disejajarkan pada sumbu silang.

JSON v0.9

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

JSON v0.8

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

Komponen tampilan katalog dasar

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 v0.9: String atau DataBinding
v0.8: BoundValue 		Konten teks yang akan ditampilkan.
variant (v0.9)
usageHint (v0.8) 		h1, h2, h3, h4, h5, caption, body Menata gaya petunjuk untuk teks.

JSON v0.9

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

JSON v0.8

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

Gambar

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

Tabel berikut menguraikan properti yang tersedia untuk komponen Image:

Properti Jenis/Nilai Deskripsi
url v0.9: String atau DataBinding
v0.8: BoundValue 		URL gambar yang akan ditampilkan.
fit String Cara gambar harus sesuai dengan containernya (misalnya, "cover").
variant (v0.9)
usageHint (v0.8) 		String Petunjuk untuk varian penggunaan atau gaya (misalnya, "hero").

JSON v0.9

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

JSON v0.8

{
  "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 v0.9: String atau DataBinding
v0.8: BoundValue 		Nama ikon yang akan ditampilkan (misalnya, "check").

JSON v0.9

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

JSON v0.8

{
  "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 v0.9

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

JSON v0.8

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

Komponen interaktif katalog dasar

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).
variant (v0.9)
primary (v0.8) 		v0.9: String (misalnya, "primary")
v0.8: Boolean 		Jenis gaya visual atau penekanan yang diterapkan pada tombol.
action v0.9: Objek Acara (misalnya, memasukkan `event`)
v0.8: Objek Tindakan (misalnya, memasukkan `name`) 		Tindakan yang akan dipicu saat tombol diklik.

JSON v0.9

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

JSON v0.8

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

TextField

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

Tabel berikut menguraikan properti yang tersedia untuk komponen TextField:

Properti Jenis/Nilai Deskripsi
label v0.9: String
v0.8: BoundValue 		Label untuk kolom teks.
value (v0.9)
text (v0.8) 		v0.9: String atau DataBinding
v0.8: BoundValue 		Konten teks atau jalur terikat.
textFieldType shortText, longText, number, obscured, date Jenis kolom teks.
validationRegexp String Ekspresi reguler untuk validasi.

JSON v0.9

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

JSON v0.8

{
  "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 v0.9: String
v0.8: BoundValue 		Label untuk kotak centang.
value v0.9: DataBinding (boolean)
v0.8: BoundValue (boolean) 		Nilai kotak centang (benar/salah) atau jalur terikat.

JSON v0.9

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

JSON v0.8

{
  "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 v0.9: DataBinding (angka)
v0.8: BoundValue (angka) 		Nilai penggeser atau jalur terikat saat ini.
minValue Angka Nilai minimum rentang.
maxValue Angka Nilai maksimum rentang.

JSON v0.9

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

JSON v0.8

{
  "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 v0.9: DataBinding
v0.8: BoundValue 		Nilai tanggal/waktu atau jalur batas yang dipilih.
enableDate Boolean Apakah akan mengaktifkan pemilihan tanggal atau tidak.
enableTime Boolean Apakah akan mengaktifkan pemilihan waktu.

JSON v0.9

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

JSON v0.8

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

ChoicePicker (v0.9) / MultipleChoice (v0.8)

Pilih satu atau beberapa opsi dari daftar. Perhatikan bahwa komponen ini telah diganti namanya menjadi ChoicePicker di v0.9 dari MultipleChoice di v0.8.

Tabel berikut menguraikan properti yang tersedia:

Properti Jenis/Nilai Deskripsi
options Array Objek Daftar opsi yang dapat dipilih oleh pengguna. Setiap opsi harus memiliki label (string di v0.9, BoundValue di v0.8) dan nilai.
selections v0.9: DataBinding
v0.8: BoundValue 		Nilai atau jalur terikat yang dipilih.
maxAllowedSelections Angka Jumlah maksimum pilihan yang diizinkan.

JSON v0.9

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

JSON v0.8

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

Komponen penampung katalog dasar

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 v0.9

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

JSON v0.8

{
  "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 v0.9

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

JSON v0.8

{
  "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 (string di v0.9, BoundValue di v0.8) dan child (ID komponen).

JSON v0.9

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

JSON v0.8

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

Ringkasan perbedaan versi

Nama dan properti komponen sebagian besar sama di seluruh versi. Perbedaan strukturalnya adalah:

Aspek v0.8 v0.9
Wrapper komponen "component": { "Text": { ... } } "component": "Text", ...props
Nilai string { "literalString": "Hello" } "Hello"
Anak { "explicitList": ["a", "b"] } ["a", "b"]
Data binding { "path": "/data" } { "path": "/data" } (sama)
Gaya Teks/Gambar usageHint variant
Gaya tombol primary: true variant: "primary"
Format tindakan { "name": "..." } { "event": { "name": "..." } }
Komponen pilihan MultipleChoice ChoicePicker
Perataan tata letak distribution, alignment justify, align
Nilai TextField text value

Panduan evolusi

Untuk mengetahui informasi tentang cara berpindah dari v0.8 ke v0.9, lihat Panduan Evolusi v0.8 ke v0.9

Contoh langsung

Untuk melihat semua komponen beraksi:

cd samples/client/angular
yarn start gallery

Langkah berikutnya