A2UI 元件庫參考資料

這個頁面提供所有可用 A2UI 元件的完整參考資料，包括版面配置、顯示、互動和容器元件，以及常見屬性。

材質目錄元件和基本目錄元件

A2UI 提供兩種不同的元件目錄，可建構代理程式使用者介面：Material 目錄和基本目錄。

Material Catalog 包含專為遵守 Google Material Design 指南而設計的元件，提供更豐富且樣式更多元的 UI 元素，並支援 A2UI v0.9 設定。

基本目錄包含與設計系統無關的標準 UI 基本元素，例如版面配置、動作和輸入內容，這些元素在 A2UI v0.9 和 v0.8 設定中都支援。

Material 目錄元件

本節提供可用的 A2UI Material Design 元件參考資料，包括版面配置、顯示、導覽和輸入元件。

材質目錄的常見屬性

無論具體類型為何，所有元件都共用一組可設定的通用屬性：

屬性 必填 說明
id 是 目前介面中元件的專屬 ID。
accessibility 否 可提升無障礙體驗的屬性，例如標籤和角色。
weight 否 這個值用於 MaterialRow 或 MaterialColumn 版面配置，可控管元件相對於同層級元件所占用的空間，類似於 flex-grow。

Material 目錄版面配置元件

版面配置元件用於建構及排列使用者介面中的其他元件。

MaterialCard

Material Design 卡片容器。

下表列出 MaterialCard 元件可用的屬性：

屬性 必填 預設值 說明
children 是 - 定義子項 ID。
appearance 否 raised 資訊卡外觀樣式。可為「outlined」或「raised」。
align 否 start 孩子是否與你意見一致。可為下列其中之一：「center」、「end」、「start」、「stretch」。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
href 否 - 使用者點選資訊卡時可前往的網址 (選填)。設定完成後，資訊卡就會變成互動式，並在新分頁中開啟網址。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialCard",
    "appearance": "outlined",
    "children": [
      "card-content"
    ]
  },
  {
    "id": "card-content",
    "component": "MaterialText",
    "text": "Card content"
  }
]

MaterialColumn

版面配置容器，可使用 Material 指南垂直排列項目。

下表列出 MaterialColumn 元件可用的屬性：

屬性 必填 預設值 說明
children 是 - 定義子項 ID。
justify 否 start 定義子項沿著主軸 (垂直) 的排列方式。可為下列其中之一：「start」、「center」、「end」、「spaceBetween」、「spaceAround」、「spaceEvenly」。
align 否 stretch 子項的水平對齊方式 (「start」、「center」、「end」、「stretch」)。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Material Design 選單對話方塊容器。

下表列出 MaterialDialog 元件可用的屬性：

屬性 必填 預設值 說明
open 否 false 對話方塊是否開啟。可以是布林常值或資料繫結參照。
title 否 - 對話方塊的標題。
disableClose 否 false 使用者是否可以點選對話方塊外部或按下 Escape 鍵來關閉對話方塊。
width 否 - 對話方塊的寬度 (例如「500px」)。
height 否 - 對話方塊的高度 (例如「400px」)。
children 是 - 定義子項 ID。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialColumn",
    "children": [
      "open-button",
      "confirmation-dialog"
    ],
    "justify": "start",
    "align": "start"
  },
  {
    "id": "open-button",
    "component": "MaterialButton",
    "label": "Delete Item",
    "variant": "raised",
    "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",
    "action": {
      "event": {
        "name": "confirmDelete"
      }
    }
  }
]

MaterialDivider

Material Design 分隔線。

下表列出 MaterialDivider 元件可用的屬性：

屬性 必填 預設值 說明
inset 否 false 分隔線是否內縮。
vertical 否 false 分隔線是否為垂直。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Material Design 展開面板容器。

下表列出 MaterialExpansionPanel 元件可用的屬性：

屬性 必填 預設值 說明
title 無 - 顯示在展開面板標題中的標題。
description 否 - 擴充面板標題中顯示的說明。
expanded 否 false 面板是否已展開。可以是布林常值或資料繫結參照。
disabled 否 false 擴展面板是否已停用。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
children 是 - 定義子項 ID。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

網格版面配置的 A2UI 容器元件。使用 Angular Material 格線清單，將子項元件排列成資訊方塊。

下表列出 MaterialGridList 元件可用的屬性：

屬性 必填 預設值 說明
children 是 - 定義子項 ID。
cols 否 2 格狀清單中的欄數。可以是數字常值或資料繫結參照。
rowHeight 否 1:1 列高比例或固定高度 (例如「100px」)。可以是字串常值或資料繫結參照。
gutterSize 否 1px 格線間距大小。可以是字串常值或資料繫結參照。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

版面配置容器，可使用 Material 指南水平排列項目。

下表列出 MaterialRow 元件可用的屬性：

屬性 必填 預設值 說明
children 是 - 定義子項 ID。
justify 否 start 定義子項沿著主軸 (水平) 的排列方式。可為下列其中之一：「start」、「center」、「end」、「spaceAround」、「spaceBetween」、「spaceEvenly」。
align 否 stretch 子項的垂直對齊方式 (「start」、「center」、「end」、「stretch」)。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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"
      }
    }
  }
]

Material 目錄內容元件

顯示和內容元件用於向使用者呈現資訊、媒體和狀態。

MaterialBadge

在子項元素上顯示 Material Design 徽章。

下表列出 MaterialBadge 元件可用的屬性：

屬性 必填 預設值 說明
text 無 - 要在徽章中顯示的文字內容。
color 否 - 徽章的調色盤 (「primary」、「accent」、「warn」)。
position 否 above after 徽章相對於容器的位置 (「above after」、「above before」、「below after」、「below before」)。
size 否 medium 徽章大小 (「small」、「medium」、「large」)。
overlap 否 true 徽章是否應與容器重疊。
disabled 否 false 徽章是否已停用。
hidden 否 false 徽章是否隱藏。
description 否 - 徽章的無障礙說明。
children 是 - 定義子項 ID。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

顯示 Material Design 圖示。

下表列出 MaterialIcon 元件可用的屬性：

屬性 必填 預設值 說明
icon 是 - 要顯示的 Material Icons 名稱。
color 否 - 圖示的調色盤 (主要、強調、警告)。
tooltip 否 - 懸停/聚焦時顯示的選用工具提示文字。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

A2UI 元件，用於在 Material Design 環境中算繪圖片。支援圓角、顯示比例和 object-fit 屬性。

下表列出 MaterialImage 元件可用的屬性：

屬性 必填 預設值 說明
url 是 - 要顯示的圖片網址。
alt 否 - 圖片的無障礙替代文字。
fit 否 - 指定圖片配合容器大小調整的方式。可為下列其中之一：「fill」、「contain」、「cover」、「scaleDown」、「none」。
width 否 - 圖片的自訂寬度 (例如「100px」、「100%」)。
height 否 - 圖片的自訂高度 (例如「100px」、「100%」)。
aspectRatio 否 - 圖片的自訂顯示比例 (例如「16/9」、「1」)。
roundedCorners 否 false 是否要套用 Material Design 標準圓角。
borderRadius 否 - 圖片的自訂邊框半徑 (例如「50%」、「12px」)。覆寫 roundedCorners。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Angular Material Progress Bar 元件的 A2UI 包裝函式。支援確定、不確定、緩衝區和查詢模式。

下表列出 MaterialProgressBar 元件可用的屬性：

屬性 必填 預設值 說明
value 否 0 確定和緩衝模式的進度值 (0 到 100)。
mode 否 determinate 進度列的模式。可為下列其中之一：「determinate」、「indeterminate」、「buffer」、「query」。
bufferValue 否 0 緩衝區模式下的緩衝區值 (0 到 100)。
color 否 - 進度列的調色盤 (「primary」、「accent」、「warn」)。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Angular Material Progress Spinner 元件的 A2UI 包裝函式。支援確定和不確定模式，以及自訂尺寸。

下表列出 MaterialProgressSpinner 元件可用的屬性：

屬性 必填 預設值 說明
value 否 0 確定模式下的進度值 (0 到 100)。
mode 否 determinate 微調器的模式。「determinate」或「indeterminate」。
diameter 否 40 進度微調器的直徑 (以像素為單位)。
strokeWidth 否 4 微調器筆劃的寬度 (以像素為單位)。
color 否 - 微調器的調色盤 (「primary」、「accent」、「warn」)。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialProgressSpinner",
    "mode": "indeterminate",
    "diameter": 40,
    "strokeWidth": 4,
    "color": "accent",
    "ariaLabel": "Loading data"
  }
]

MaterialTable

Angular Material Table 元件的 A2UI 包裝函式。將結構化資料轉譯為資料欄和資料列。

下表列出 MaterialTable 元件可用的屬性：

屬性 必填 預設值 說明
columns 是 - 資料欄定義陣列，每個定義都會指定 {header, field} 物件。
rows 是 - 資料列清單。可以是鍵/值記錄陣列或資料繫結參照。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
caption 否 - 資料表可供查看的說明/說明文字。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

以 Material Design 字體顯示文字。

下表列出 MaterialText 元件可用的屬性：

屬性 必填 預設值 說明
text 是 - 要顯示的文字。可以是字串常值，也可以是資料模型中的值參照。
usageHint 否 body 字體樣式的提示。可為下列其中之一：「h1」、「h2」、「h3」、「h4」、「h5」、「subtitle1」、「subtitle2」、「body1」、「body2」、「body」、「caption」。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Material 目錄導覽元件

使用者可以透過導覽和動作元件執行動作，或在不同檢視畫面之間導覽。

MaterialButton

Material Design 按鈕。

下表列出 MaterialButton 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 按鈕上顯示的文字標籤。
leadingIcon 否 - 要在標籤前顯示的 Material Icons 名稱。
trailingIcon 否 - 要在標籤後顯示的 Material Icon 名稱。
variant 否 basic 按鈕樣式變體。可為下列其中之一：「raised」、「flat」、「stroked」、「icon」、「fab」、「mini-fab」、「basic」。
appearance 否 - 按鈕的外觀。可為下列其中之一：「text」、「filled」、「elevated」、「outlined」、「tonal」。
disabled 否 false 按鈕是否已停用。
action 否 - 點選按鈕時要調度的動作。
tooltip 否 - 懸停時顯示的工具提示文字。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
disableRipple 否 false 是否停用點擊時的漣漪效果。
extended 否 false 按鈕是否擴展，並附上額外標籤或圖示空間。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Material Design 圖示按鈕。

下表列出 MaterialIconButton 元件可用的屬性：

屬性 必填 預設值 說明
icon 是 - 要顯示的 Material Icons 名稱。
action 是 - 點選圖示按鈕時要調度的用戶端動作。
ariaLabel 是 - 螢幕閱讀器可辨識的文字。建議使用，因為按鈕只包含圖示，方便使用者存取。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
color 否 - 按鈕的調色盤 (主要、強調、警告)。
disabled 否 false 按鈕是否已停用。
tooltip 否 - 懸停時顯示的工具提示文字。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Angular Material Menu 元件的 A2UI 包裝函式。提供觸發按鈕和下拉式選單項目。

下表列出 MaterialMenu 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 選單觸發按鈕上顯示的文字標籤。
icon 否 - 要在觸發按鈕上顯示的 Material Icon 名稱。
disabled 否 false 選單觸發按鈕是否已停用。
value 否 - 目前選取的值。可以是字串常值或資料繫結參照。
options 是 - 可用的選單選項清單。可以是 {label, value} 物件的陣列，或資料繫結參照。
action 否 - 選取選單項目時要調度的用戶端動作。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Angular Material Tabs 元件的 A2UI 包裝函式。算繪分頁導覽，並管理使用中的分頁選取項目。

下表列出 MaterialTabs 元件可用的屬性：

屬性 必填 預設值 說明
tabs 是 - 分頁定義陣列，每個定義都指定 {label, content} 物件。
activeTab 否 0 目前有效分頁的索引 (從 0 開始)。可以是數字常值或資料繫結參照。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialTabs",
    "activeTab": {
      "path": "/app/selectedTab"
    },
    "tabs": [
      {
        "label": "Overview",
        "content": "Overview content"
      },
      {
        "label": "Details",
        "content": "Details content"
      },
      {
        "label": "Reviews",
        "content": "Reviews content"
      }
    ]
  }
]

Material 目錄輸入元件

輸入和表單元件可讓使用者輸入文字、選取項目及切換選項。

MaterialButtonToggle

Material Design 按鈕切換群組，用於單一選取項目。

下表列出 MaterialButtonToggle 元件可用的屬性：

屬性 必填 預設值 說明
value 無 - 目前選取的值。可以是字串常值，也可以是資料模型中的值參照。
options 是 - 可供選取的選項清單。可以是 {label, value} 物件的陣列，或資料繫結參照。
disabled 否 false 按鈕切換群組是否已停用。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
appearance 否 standard 按鈕切換群組的外觀樣式。「legacy」或「standard」之一。
vertical 否 false 按鈕切換群組是否為垂直排列。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

適用於布林狀態的 Material Design 核取方塊元件。為獲得最佳無障礙體驗，請提供說明性標籤，或使用輔助技術的 ariaLabel。

下表列出 MaterialCheckbox 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 核取方塊旁邊顯示的文字標籤。
checked 否 false 核取方塊是否已勾選。這可以是常值布林值，也可以是資料模型中值的參照。
disabled 否 false 核取方塊是否已停用。
color 否 - 核取方塊的調色盤 (「primary」、「accent」、「warn」)。
labelPosition 否 after 標籤相對於核取方塊的位置 (「before」、「after」)。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
tooltip 否 - 懸停時顯示的工具提示文字。
checks 否 - 驗證規則陣列 (每個規則都包含動態布林條件和錯誤訊息)，系統會主動評估這些規則，判斷輸入內容是否有效。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialCheckbox",
    "label": "Agree to Terms and Conditions",
    "ariaLabel": "Agree to Terms and Conditions",
    "checked": {
      "path": "/user/agreedToTerms"
    },
    "color": "primary"
  }
]

MaterialChips

Material Design 方塊清單方塊元件，用於單一選取。

下表列出 MaterialChips 元件可用的屬性：

屬性 必填 預設值 說明
value 無 - 目前選取的值。可以是字串常值，也可以是資料模型中的值參照。
options 是 - 晶片選項清單。可以是 {label, value} 物件的陣列，或資料繫結參照。
disabled 否 false 晶片清單方塊是否已停用。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
action 否 - 選取動態磚時要調度的動作。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Material Design 日期挑選器元件。

下表列出 MaterialDatepicker 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 日期挑選器欄位的標籤。
placeholder 否 - 預留位置文字。
value 否 - 目前所選日期的 ISO 格式。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
disabled 否 false 日期挑選器是否已停用。
checks 否 - 驗證規則陣列 (每個規則都包含動態布林條件和錯誤訊息)，系統會主動評估這些規則，判斷輸入內容是否有效。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialDatepicker",
    "label": "Appointment Date",
    "placeholder": "Choose a date",
    "ariaLabel": "Appointment Date",
    "value": {
      "path": "/appointment/date"
    }
  }
]

MaterialInput

Material Design 文字輸入欄位。

下表列出 MaterialInput 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 輸入欄位的標籤。
placeholder 否 - 預留位置文字。
value 否 - 輸入的目前值。可以是字串常值，也可以是資料模型中的值參照。
disabled 否 false 輸入是否已停用。
name 否 - 輸入元素的名稱。
readonly 否 false 輸入內容是否為唯讀。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
type 否 text 要顯示的輸入控制項類型。可為下列其中之一：「text」、「number」、「email」、「tel」、「date」。不得使用「password」。
validationRegexp 否 - 用於驗證輸入內容的規則運算式。
checks 否 - 驗證規則陣列 (每個規則都包含動態布林條件和錯誤訊息)，系統會主動評估這些規則，判斷輸入內容是否有效。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialInput",
    "label": "First Name",
    "placeholder": "John",
    "value": {
      "path": "/user/firstName"
    }
  }
]

MaterialRadioButton

Angular Material 圓形按鈕元件的 A2UI 包裝函式。支援從圓形按鈕群組的選項清單中選取單一選項。

下表列出 MaterialRadioButton 元件可用的屬性：

屬性 必填 預設值 說明
value 無 - 目前選取的值。可以是字串常值或資料繫結參照。
options 是 - 可用的無線電選項清單。可以是 {label, value} 物件的陣列，或資料繫結參照。
disabled 否 false 單選按鈕群組是否已停用。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
color 否 - 單選按鈕的調色盤 (「primary」、「accent」、「warn」)。
labelPosition 否 after 標籤相對於圓形按鈕的位置。「before」或「after」。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Material Design 選取 (下拉式) 元件，用於單一選取。為獲得最佳無障礙體驗，請一律提供說明性標籤，或使用 aria-label 輔助技術。

下表列出 MaterialSelect 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 選取欄位的標籤。
placeholder 否 - 未選取任何值時顯示的預留位置文字。
value 否 - 目前選取的值。可以是字串常值，也可以是資料模型中的值參照。
options 是 - 可供選取的選項清單。可以是 {label, value} 物件的陣列，或資料繫結參照。
disabled 否 false 選取元件是否已停用。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
checks 否 - 驗證規則陣列 (每個規則都包含動態布林條件和錯誤訊息)，系統會主動評估這些規則，判斷輸入內容是否有效。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "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

Angular Material Slide Toggle 元件的 A2UI 包裝函式。支援布林值切換繫結和自訂無障礙屬性。

下表列出 MaterialSlideToggle 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 顯示在滑桿旁的文字標籤。
checked 否 false 是否已勾選滑桿切換鈕。可以是布林常值或資料繫結參照。
disabled 否 false 是否停用滑桿切換鈕。
required 否 false 是否必須使用滑桿切換鈕。
color 否 - 切換鈕的調色盤 (「primary」、「accent」、「warn」)。
labelPosition 否 after 標籤相對於切換按鈕的位置 (「before」、「after」)。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
tooltip 否 - 懸停時顯示的工具提示文字。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Angular Material Slider 元件的 A2UI 包裝函式。支援選取數值和範圍限制。

下表列出 MaterialSlider 元件可用的屬性：

屬性 必填 預設值 說明
value 否 0 滑桿的目前值。可以是數字常值或資料繫結參照。
min 否 0 滑桿的最小值。
max 否 100 滑桿的最大值。
step 否 1 滑桿的步進增量。
disabled 否 false 滑桿是否已停用。
color 否 - 滑桿的調色盤 (「primary」、「accent」、「warn」)。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialSlider",
    "min": 0,
    "max": 100,
    "step": 5,
    "value": {
      "path": "/audio/volume"
    },
    "color": "primary",
    "ariaLabel": "Volume adjustment"
  }
]

MaterialTimepicker

Angular Material Timepicker 元件的 A2UI 包裝函式。支援時間選取和表單欄位整合。

下表列出 MaterialTimepicker 元件可用的屬性：

屬性 必填 預設值 說明
label 無 - 時間挑選器欄位的文字標籤。
placeholder 否 - 預留位置文字。
value 否 - 目前所選時間的 ISO 格式。可以是字串常值或資料繫結參照。
ariaLabel 否 - 螢幕閱讀器可辨識的文字。如果沒有可見標籤，建議使用這項屬性，以提升無障礙功能體驗。
ariaLabelledby 否 - 用於識別標記目前元素的一或多個元素。用於無障礙功能。
ariaDescribedby 否 - 識別說明目前元素的一或多個元素。用於無障礙功能。
disabled 否 false 時間挑選器是否已停用。
checks 否 - 驗證規則陣列 (每個規則都包含動態布林條件和錯誤訊息)，系統會主動評估這些規則，判斷輸入內容是否有效。
style 否 - 要套用至元素的內嵌樣式。
weight 否 - 元素放置在彈性容器時的版面配置權重。 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

基本目錄元件

本節提供可用的 A2UI 基本目錄元件參考資料。

基本目錄結構定義檔案

如要進一步瞭解這些屬性，請參閱：

基本目錄的常見屬性

無論具體類型為何，所有元件都共用一組可設定的通用屬性：

屬性 必填 說明
id 是 目前介面中元件的專屬 ID。
accessibility 否 可提升無障礙體驗的屬性，例如標籤和角色。
weight 否 這個值用於 Row 或 Column 版面配置，可控管元件相對於同層級元件所占用的空間，類似於 flex-grow。

基本目錄版面配置元件

版面配置元件可用來在使用者介面中建構及排列其他元件。以下是可用的版面配置元件：

列

Row 是版面配置元件，用於從左到右水平排列子項元件。可做為容器，並排放置多個元件。您可以使用 justify/distribution 和 align/alignment 屬性，控制子項在列中的確切間距和位置。

下表列出 Row 元件可用的屬性：

屬性 類型/值 說明
children v0.9：元件 ID 或範本定義的陣列
v0.8： explicitList 或 template 		要在 Row 中水平排列的子項元件。
justify (v0.9)
distribution (v0.8) 		start、center、end、 spaceBetween、spaceAround、spaceEvenly 控制子項元件沿水平軸的分布方式。
align (v0.9)
alignment (v0.8) 		start、center、end、stretch 控制子項元件在垂直軸上的對齊方式。

v0.9 JSON

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

v0.8 JSON

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

欄

Column 是版面配置元件，用於垂直排列子元件 (由上而下)。這個容器可讓您將多個元件依序放置在彼此下方。您可以使用 justify/distribution 和 align/alignment 屬性，控制資料欄中子項目的確切間距和位置。

下表列出 Column 元件可用的屬性：

屬性 類型/值 說明
children v0.9：元件 ID 或範本定義的陣列
v0.8： explicitList 或 template 		要在 Column 中垂直排列的子項元件。
justify (v0.9)
distribution (v0.8) 		start、center、end、spaceBetween、spaceAround、spaceEvenly 控制子項元件沿垂直軸的分布方式。
align (v0.9)
alignment (v0.8) 		start、center、end、stretch 控制子項元件在水平軸上的對齊方式。

v0.9 JSON

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

v0.8 JSON

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

清單

List 是版面配置元件，用於顯示可捲動的項目清單。這個函式支援靜態子項和動態範本，可根據資料生成項目。捲動方向可以是垂直或水平。

下表列出 List 元件可用的屬性：

屬性 類型/值 說明
children v0.9：元件 ID 或範本定義的陣列
v0.8： explicitList 或 template 		要在清單中顯示的項目。
direction vertical、horizontal 清單的捲動方向。
align (v0.9)
alignment (v0.8) 		start、center、end、stretch 控制清單項目在交錯軸上的對齊方式。

v0.9 JSON

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

v0.8 JSON

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

基本目錄顯示元件

顯示元件用於向使用者呈現資訊。以下是可用的顯示元件：

文字

Text 元件會顯示文字內容，並支援各種樣式提示，例如標題、說明文字和內文。

下表列出 Text 元件可用的屬性：

屬性 類型/值 說明
text v0.9：字串或 DataBinding
v0.8： BoundValue 		要顯示的文字內容。
variant (v0.9)
usageHint (v0.8) 		h1，h2，h3，h4，h5，caption，body 文字的樣式提示。

v0.9 JSON

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

v0.8 JSON

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

圖片

Image 元件會顯示指定網址的圖片，並提供選項來控制圖片在容器中的顯示方式。

下表列出 Image 元件可用的屬性：

屬性 類型/值 說明
url v0.9：字串或 DataBinding
v0.8： BoundValue 		要顯示的圖片網址。
fit 字串 圖片配合容器大小調整的方式 (例如「cover」)。
variant (v0.9)
usageHint (v0.8) 		字串 使用或樣式變體提示 (例如「英雄」)。

v0.9 JSON

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

v0.8 JSON

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

圖示

Icon 元件會顯示目錄中定義的標準組合圖示。

下表列出 Icon 元件可用的屬性：

屬性 類型/值 說明
name v0.9：字串或 DataBinding
v0.8： BoundValue 		要顯示的圖示名稱 (例如「check」)。

v0.9 JSON

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

v0.8 JSON

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

分隔線

Divider 元件會顯示視覺分隔線，可以是水平或垂直。

下表列出 Divider 元件可用的屬性：

屬性 類型/值 說明
axis horizontal、vertical 分隔線的方向。

v0.9 JSON

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

v0.8 JSON

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

基本目錄互動式元件

透過互動式元件，您可以與應用程式互動，例如提供輸入內容或觸發動作。可用的互動式元件如下：

按鈕

Button 元件是可點擊的元素，可觸發應用程式內的特定動作或事件。

下表列出 Button 元件可用的屬性：

屬性 類型/值 說明
child 元件 ID 要在按鈕內顯示的元件 ID (例如「文字」元件)。
variant (v0.9)
primary (v0.8) 		v0.9：字串 (例如 "primary")
v0.8：布林值 		套用至按鈕的樣式類型或強調效果。
action v0.9：事件物件 (例如鍵入 `event`)
v0.8：動作物件 (例如鍵入 `name`) 		點選按鈕時要觸發的動作。

v0.9 JSON

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

v0.8 JSON

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

TextField

TextField 是可供輸入文字的互動式元件。此外，這項功能也支援選用驗證。

下表列出 TextField 元件可用的屬性：

屬性 類型/值 說明
label v0.9：字串
v0.8： BoundValue 		文字欄位的標籤。
value (v0.9)
text (v0.8) 		v0.9：字串或 DataBinding
v0.8： BoundValue 		文字內容或繫結路徑。
textFieldType shortText、longText、number、obscured、date 文字欄位類型。
validationRegexp 字串 用於驗證的規則運算式。

v0.9 JSON

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

v0.8 JSON

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

CheckBox

CheckBox 元件是布林值切換鈕，可開啟或關閉設定。

下表列出 CheckBox 元件可用的屬性：

屬性 類型/值 說明
label v0.9：字串
v0.8： BoundValue 		核取方塊的標籤。
value v0.9： DataBinding (布林值)
v0.8： BoundValue (布林值) 		核取方塊的值 (true/false) 或繫結路徑。

v0.9 JSON

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

v0.8 JSON

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

滑桿

Slider 元件可讓您從特定範圍選取數值。

下表列出 Slider 元件可用的屬性：

屬性 類型/值 說明
value v0.9： DataBinding (數字)
v0.8： BoundValue (數字) 		滑桿或繫結路徑的目前值。
minValue 數字 範圍的最小值。
maxValue 數字 範圍的最大值。

v0.9 JSON

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

v0.8 JSON

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

DateTimeInput

DateTimeInput 元件可供您選擇日期和時間。

下表列出 DateTimeInput 元件可用的屬性：

屬性 類型/值 說明
value v0.9： DataBinding
v0.8： BoundValue 		所選日期/時間值或繫結路徑。
enableDate 布林值 是否啟用日期選取功能。
enableTime 布林值 是否啟用時間選取功能。

v0.9 JSON

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

v0.8 JSON

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

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

從清單中選取一或多個選項。請注意，這個元件在 v0.9 中已從 MultipleChoice 重新命名為 ChoicePicker。

下表列出可用的屬性：

屬性 類型/值 說明
options 物件陣列 使用者可選取的選項清單。每個選項都應包含標籤 (v0.9 中的字串，v0.8 中的 BoundValue) 和值。
selections v0.9： DataBinding
v0.8： BoundValue 		所選值或繫結路徑。
maxAllowedSelections 數字 可選取的數量上限。

v0.9 JSON

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

v0.8 JSON

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

基本目錄容器元件

容器元件可用來分組及整理其他元件。可用的容器元件如下：

卡片

Card 元件是具有高度、邊框和邊框間距的容器，可將相關內容分組。

下表列出 Card 元件可用的屬性：

屬性 類型/值 說明
child 元件 ID 要在資訊卡內顯示的元件 ID。

v0.9 JSON

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

v0.8 JSON

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

Modal 元件是由進入點元件觸發的疊加對話方塊。

下表列出 Modal 元件可用的屬性：

屬性 類型/值 說明
entryPointChild 元件 ID 觸發強制回應的元件 ID (例如按鈕)。
contentChild 元件 ID 要顯示為模式視窗內容的元件 ID。

v0.9 JSON

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

v0.8 JSON

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

分頁

Tabs 元件提供分頁介面，可將內容整理到可切換的面板中。

下表列出 Tabs 元件可用的屬性：

屬性 類型/值 說明
tabItems 物件陣列 分頁清單。每個項目都應包含 title (v0.9 中的字串，v0.8 中的 BoundValue) 和 child (元件 ID)。

v0.9 JSON

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

v0.8 JSON

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

版本差異摘要

各版本之間的元件名稱和屬性大致相同。結構差異如下：

切面 v0.8 v0.9
元件包裝函式 "component": { "Text": { ... } } "component": "Text", ...props
字串值 { "literalString": "Hello" } "Hello"
子項 { "explicitList": ["a", "b"] } ["a", "b"]
資料繫結 { "path": "/data" } { "path": "/data" } (相同)
文字/圖片樣式 usageHint variant
按鈕樣式 primary: true variant: "primary"
動作格式 { "name": "..." } { "event": { "name": "..." } }
選項元件 MultipleChoice ChoicePicker
版面配置對齊 distribution、alignment justify、align
TextField 值 text value

演進指南

如要瞭解如何從 v0.8 遷移至 v0.9，請參閱 v0.8 至 v0.9 演進指南

實際示例

如要查看所有元件的實際運作情況，請按照下列步驟操作：

cd samples/client/angular
yarn start gallery

後續步驟