A2UI 组件库参考文档

此页面全面介绍了所有可用的 A2UI 组件，包括布局、显示、互动和容器组件，以及常见属性。

Material 目录组件和基本目录组件

A2UI 提供了两个不同的组件目录，用于构建智能体界面：Material 目录和基本目录。

Material 目录包含专门设计的组件，这些组件符合 Google Material Design 指南，可提供更丰富、更具风格的界面元素，这些元素在 A2UI v0.9 配置中受支持。

基本目录包含 A2UI v0.9 和 v0.8 配置中均支持的标准、与设计系统无关的界面基元，例如布局、操作和输入。

Material 目录组件

本部分提供了可用 A2UI Material Design 组件的参考，包括布局、显示、导航和输入组件。

材料目录通用属性

所有组件（无论其具体类型如何）都共用一组可配置的通用属性：

属性 必需 说明
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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 徽章的大小（“小”“中”“大”）。
overlap 否 true 徽章是否应与其容器重叠。
disabled 否 false 徽章是否已停用。
hidden 否 false 徽章是否处于隐藏状态。
description 否 - 徽章的无障碍说明。
children 是 - 定义子 ID。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialBadge",
    "text": "42",
    "color": "warn",
    "children": [
      "badge-content"
    ]
  },
  {
    "id": "badge-content",
    "component": "MaterialButton",
    "label": "Notifications"
  }
]

MaterialIcon

显示 Material Design 图标。

下表概述了 MaterialIcon 组件可用的属性：

属性 必填 默认值 说明
icon 是 - 要显示的 Material 图标的名称。
color 否 - 图标的调色板（主要、强调、警告）。
tooltip 否 - 在悬停/聚焦时显示的可选提示文本。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialIcon",
    "icon": "favorite",
    "color": "warn"
  }
]

MaterialImage

用于在 Material Design 上下文中渲染图片的 A2UI 组件。支持圆角、宽高比和 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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 进度条组件的 A2UI 封装容器。支持确定、不确定、缓冲和查询模式。

下表列出了 MaterialProgressBar 组件可用的属性：

属性 必填 默认值 说明
value 否 0 确定模式和缓冲模式下的进度值（0 到 100）。
mode 否 determinate 进度条的模式。“determinate”“indeterminate”“buffer”“query”之一。
bufferValue 否 0 缓冲模式下的缓冲值（0 到 100）。
color 否 - 进度条的调色板（“primary”“accent”“warn”）。
ariaLabel 否 - 屏幕阅读器可识别的文本。在没有可见标签时，建议使用此属性以提高无障碍性。
ariaLabelledby 否 - 标识用于标记当前元素的元素。用于无障碍功能。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialProgressBar",
    "mode": "determinate",
    "value": 75,
    "bufferValue": 90,
    "color": "primary",
    "ariaLabel": "Loading progress"
  }
]

MaterialProgressSpinner

Angular Material 进度旋转图标组件的 A2UI 封装容器。支持确定性模式和不确定性模式，以及自定义维度。

下表列出了 MaterialProgressSpinner 组件可用的属性：

属性 必填 默认值 说明
value 否 0 确定模式下的进度值（0 到 100）。
mode 否 determinate 微调框的模式。“determinate”或“indeterminate”之一。
diameter 否 40 进度旋转图标的直径（以像素为单位）。
strokeWidth 否 4 旋转图标描边宽度（以像素为单位）。
color 否 - 旋转图标的调色板（“primary”“accent”“warn”）。
ariaLabel 否 - 屏幕阅读器可识别的文本。在没有可见标签时，建议使用此属性以提高无障碍性。
ariaLabelledby 否 - 标识用于标记当前元素的元素。用于无障碍功能。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialTable",
    "columns": [
      {
        "header": "ID",
        "field": "id"
      },
      {
        "header": "Name",
        "field": "name"
      },
      {
        "header": "Role",
        "field": "role"
      }
    ],
    "rows": {
      "path": "/company/users"
    }
  }
]

MaterialText

显示采用 Material 排版的文字。

下表概述了 MaterialText 组件可用的属性：

属性 必填 默认值 说明
text 是 - 要显示的文本。可以是字面量字符串，也可以是对数据模型中某个值的引用。
usageHint 否 body 排版样式的提示。以下值之一：“h1”“h2”“h3”“h4”“h5”“subtitle1”“subtitle2”“body1”“body2”“body”“caption”。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialText",
    "text": "Headline Large (H1)",
    "usageHint": "h1"
  }
]

Material 目录导航组件

导航和操作组件可让用户执行操作或在视图之间导航。

MaterialButton

Material Design 按钮。

下表概述了 MaterialButton 组件可用的属性：

属性 必填 默认值 说明
label 否 - 要在按钮上显示的文本标签。
leadingIcon 否 - 要在标签前显示的 Material 图标的名称。
trailingIcon 否 - 要在标签后显示的 Material 图标的名称。
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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialButton",
    "label": "Raised Button",
    "variant": "raised",
    "tooltip": "Click me!",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialIconButton

Material Design 图标按钮。

下表列出了 MaterialIconButton 组件可用的属性：

属性 必填 默认值 说明
icon 是 - 要显示的 Material 图标的名称。
action 是 - 点击图标按钮时要分发的客户端操作。
ariaLabel 是 - 屏幕阅读器可识别的文本。由于按钮仅包含图标，因此建议使用此属性以确保无障碍。
ariaLabelledby 否 - 标识用于标记当前元素的元素。用于无障碍功能。
ariaDescribedby 否 - 标识用于描述当前元素的元素。用于无障碍功能。
color 否 - 按钮的调色板（主色、强调色、警告色）。
disabled 否 false 按钮是否已停用。
tooltip 否 - 悬停时显示的提示文本。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialIconButton",
    "icon": "favorite",
    "ariaLabel": "Favorite",
    "color": "warn",
    "action": {
      "event": {
        "name": "click"
      }
    }
  }
]

MaterialMenu

Angular Material 菜单组件的 A2UI 封装容器。提供触发按钮和下拉菜单项。

下表概述了 MaterialMenu 组件可用的属性：

属性 必填 默认值 说明
label 否 - 显示在菜单触发按钮上的文本标签。
icon 否 - 要在触发器按钮上显示的 Material 图标的名称。
disabled 否 false 菜单触发按钮是否已停用。
value 否 - 当前所选的值。可以是文本字符串，也可以是数据绑定引用。
options 是 - 可用菜单选项的列表。可以是 {label, value} 对象的数组，也可以是数据绑定引用。
action 否 - 选择菜单项时要分派的客户端操作。
ariaLabel 否 - 屏幕阅读器可识别的文本。在没有可见标签时，建议使用此属性以提高无障碍性。
ariaLabelledby 否 - 标识用于标记当前元素的元素。用于无障碍功能。
ariaDescribedby 否 - 标识用于描述当前元素的元素。用于无障碍功能。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 放置在 flex 容器中时元素的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 滑动切换开关组件的 A2UI 封装容器。支持布尔值切换开关绑定和自定义无障碍属性。

下表列出了 MaterialSlideToggle 组件可用的属性：

属性 必填 默认值 说明
label 否 - 显示在滑动开关旁边的文字标签。
checked 否 false 指示滑动切换开关是否处于选中状态。可以是字面布尔值，也可以是数据绑定引用。
disabled 否 false 滑动切换开关是否已停用。
required 否 false 是否必须使用滑动切换开关。
color 否 - 切换开关的调色板（“primary”“accent”“warn”）。
labelPosition 否 after 标签相对于切换开关的位置（“之前”“之后”）。
ariaLabel 否 - 屏幕阅读器可识别的文本。在没有可见标签时，建议使用此属性以提高无障碍性。
ariaLabelledby 否 - 标识用于标记当前元素的元素。用于无障碍功能。
ariaDescribedby 否 - 标识用于描述当前元素的元素。用于无障碍功能。
tooltip 否 - 悬停时显示的提示文本。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialSlideToggle",
    "label": "Enable notifications",
    "ariaLabel": "Enable notifications toggle",
    "checked": {
      "path": "/settings/notifications"
    },
    "color": "accent",
    "labelPosition": "after"
  }
]

MaterialSlider

Angular Material 滑块组件的 A2UI 封装容器。支持数值选择和范围限制。

下表列出了 MaterialSlider 组件可用的属性：

属性 必填 默认值 说明
value 否 0 滑块的当前值。可以是字面数字，也可以是数据绑定引用。
min 否 0 滑块的最小值。
max 否 100 滑块的最大值。
step 否 1 滑块的步进增量。
disabled 否 false 滑块是否已停用。
color 否 - 滑块的调色板（“primary”“accent”“warn”）。
ariaLabel 否 - 屏幕阅读器可识别的文本。在没有可见标签时，建议使用此属性以提高无障碍性。
ariaLabelledby 否 - 标识用于标记当前元素的元素。用于无障碍功能。
ariaDescribedby 否 - 标识用于描述当前元素的元素。用于无障碍功能。
style 否 - 要应用于元素的内嵌样式。
weight 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "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 否 - 元素在 Flex 容器中的布局权重。 
[
  {
    "id": "root",
    "component": "MaterialTimepicker",
    "label": "Set Alarm",
    "placeholder": "Select time",
    "ariaLabel": "Set Alarm Time",
    "value": {
      "path": "/alarm/time"
    }
  }
]

基本目录组件

本部分提供了有关可用 A2UI 基本目录组件的参考信息。

基本目录架构文件

如需详细了解这些属性，请参阅：

基本目录通用属性

所有组件（无论其具体类型如何）都有一组可配置的通用属性：

属性 必需 说明
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 要在按钮内显示的组件（例如 Text 组件）的 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

后续步骤