# 为华为云Astro轻应用标准页面添加组件
#### 标准页面组件分类
标准页面组件包括系统预置的基本组件和用户自定义的扩展组件，基本组件具体说明如[表1]所示。如果需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上方会出现问号图标![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001910676414.png)，单击该图标会出现该基本组件的使用说明。
 表1基本组件分类说明 
| 组件分类                                                       | 组件名称       | 组件说明                                                                                                                                                                                                                                                                                                                                  |
|:---|:---|:---|
| 布局                                                         | 表单         | 具备数据收集、校验及提交功能的表单，包含复选框、单选框、输入框与下拉选择框等元素。 使用时需要与数据模型绑定，当数据类型为对象时，可选择后台Object自动生成表单，也可以绑定自定义数据模型生成表单。                                                                                                                                                                                             |
| 布局                                                         | 表格         | 表格组件主要用于展示大量结构化数据，支持排序、筛选、分页和自定义操作等复杂功能。 使用时需要与数据模型绑定，支持用户根据实际业务需求进行二次修改编排。                                                                                                                                                                                                                        |
| 布局                                                         | 容器         | 基础布局容器，支持流式布局和弹性布局。                                                                                                                                                                                                                                                                                                                   |
| 布局                                                         | 分栏         | 分栏是一种高级的容器组件，相当于行，内部可分多栏（列），可以将页面划分为两栏或者多栏，每一栏都可以拖入其它组件。                                                                                                                                                                                                                                                                              |
| 布局                                                         | 折叠面板       | 折叠面板组件用于将内容区域折叠/展开。                                                                                                                                                                                                                                                                                                                   |
| 布局                                                         | 页签         | 页签是选项卡切换组件，用于平级区域大块内容的收纳和展现。                                                                                                                                                                                                                                                                                                          |
| 布局                                                         | 列表视图       | 通过列表视图组件，可灵活组合列表项的内容，并且根据实例化数据动态展示。 使用时需要在列表视图上绑定数据模型。数据类型为数组，如果要使用分页，分页组件需放在列表视图容器内。                                                                                                                                                                                                                |
| 布局                                                         | 模态框        | 模态对话框，在保留当前页面状态的情况下，在浮层中显示。                                                                                                                                                                                                                                                                                                           |
| 布局                                                         | 表格(新)      | 数据表格组件，用于展示大量结构化数据，支持电脑端和移动端。支持对数据列表进行选择、排序、筛选、分页、自定义操作等复杂功能。 使用时需要在表格(新)上绑定数据模型。                                                                                                                                                                                                                  |
| 表单                                                         | 输入框        | 单行文本输入框，只允许输入一行文本内容，通常用于录入简短的信息，如姓名、电话等信息。                                                                                                                                                                                                                                                                                            |
| 表单                                                         | 多行输入框      | 多行文本输入框，允许输入多行文本内容，通常用于录入较长文字、段落或复杂信息。                                                                                                                                                                                                                                                                                                |
| 表单                                                         | 日期选择框      | 日期选择框用于选择或输入日期，支持年、月、日等类型，支持选择范围。                                                                                                                                                                                                                                                                                                     |
| 表单                                                         | 数字输入框      | 数字输入框用于输入数据。                                                                                                                                                                                                                                                                                                                          |
| 表单                                                         | 复选按钮       | 复选按钮允许一次性选择多个选项，例如个人爱好。                                                                                                                                                                                                                                                                                                               |
| 表单                                                         | 单选按钮       | 单选按钮只允许选择一个选项，例如性别。                                                                                                                                                                                                                                                                                                                   |
| 表单                                                         | 下拉框        | 使用下拉菜单，展示并选择内容。                                                                                                                                                                                                                                                                                                                       |
| 表单                                                         | 级联选择框      | 从一组相关联的数据集合中进行选择，通常用于省市区、公司层级、事务分类等选择。                                                                                                                                                                                                                                                                                                |
| 表单                                                         | 开关         | 在开、关两种状态间切换时使用到的开关选择器。                                                                                                                                                                                                                                                                                                                |
| 表单                                                         | 上传         | 文件选择上传和拖拽上传控件，可以通过绑定数据模型，上传文件列表会保存在绑定的模型中。                                                                                                                                                                                                                                                                                            |
| 表单                                                         | 自动完成       | 带有提示的文本输入框。                                                                                                                                                                                                                                                                                                                           |
| 表单                                                         | 关联选择框      | 一个搜索的选择框，关联对象的查找关系（lookup）或主从关系（masterdetail）类型，可以通过搜索来匹配下拉的选项，匹配成功的选项会展开在下拉列表中。                                                                                                                                                                                                                                                      |
| 表单                                                         | 弹出对话框      | 用于弹出对话选择框，选择后回显至输入框的场景。                                                                                                                                                                                                                                                                                                               |
| 表单                                                         | 多语言选择框     | 多语言切换组件，根据系统设置的多语言信息，展示配置项。                                                                                                                                                                                                                                                                                                           |
| 表单                                                         | 评分         | 评分与评价组件，在需要收集评分与评价时使用。                                                                                                                                                                                                                                                                                                                |
| 表单                                                         | 用户         | 用户组件，主要用于选择业务用户。                                                                                                                                                                                                                                                                                                                      |
| 表单                                                         | 部门         | 部门组件，主要用于选择组织部门。                                                                                                                                                                                                                                                                                                                      |
| 基本                                                         | 按钮         | 按钮组件用于根据不同的单击事件，触发相应的业务逻辑。                                                                                                                                                                                                                                                                                                            |
| 基本                                                         | 按钮卡        | 按钮卡是按钮的组合，可纵向排列。在页面中，当不同的单击事件触发不同的业务逻辑时，提供一组按钮，可配置各自的单击事件。                                                                                                                                                                                                                                                                            |
| 基本                                                         | 标签         | 标签组件用于展示页面信息的静态文本。                                                                                                                                                                                                                                                                                                                    |
| 基本                                                         | 图标         | 图标组件用于辅助相关文字进行展示，也可当做按钮单击使用，通常需要配合其他组件一起使用。                                                                                                                                                                                                                                                                                           |
| 基本                                                         | 标题         | 标题组件，需要在页面设置标题时使用。                                                                                                                                                                                                                                                                                                                    |
| 基本                                                         | 链接         | 在页面设置跳转链接时使用，能够从当前页面打开所配置的链接地址。链接地址必须以"http://"或"https://"开头。                                                                                                                                                                                                                                                                         |
| 基本                                                         | 图片         | 图片展示组件，图片格式必须为JPG、JPEG、PNG和GIF，且每张图片的大小不能超过50MB。                                                                                                                                                                                                                                                                                      |
| 基本                                                         | 面包屑        | 显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。                                                                                                                                                                                                                                                                                                   |
| 基本                                                         | 滑块         | 滑动输入器，用于在数值区间或自定义区间内进行选择，支持连续或离散值。在涉及设置音量、调节亮度、选择日期范围等场合时，可以使用该组件。                                                                                                                                                                                                                                                                    |
| 基本                                                         | 分页         | 将页面数据以分页形式展示，可限制每页展示的条数。当数据量大时，使用分页能够迅速完成数据切换。                                                                                                                                                                                                                                                                                        |
| 基本                                                         | 二维码        | 二维码生成组件，可以调整二维码的尺寸，支持输入文本或链接地址。                                                                                                                                                                                                                                                                                                       |
| 高级                                                         | 选项树        | 需要在界面设置树结构内容时，如配置目录之间的层级结构、展示商品的分类结构、显示公司和组织的层级架构时，可以使用选项树组件。该组件能完整展现树形结构数据的层级关系，并具备展开、收起、选择等交互功能。                                                                                                                                                                                                                                    |
| 高级                                                         | 步骤条        | 步骤条用于引导用户按照流程完成任务的分步导航，例如表单向导、注册流程等场景，可依据具体应用场景设置步骤。                                                                                                                                                                                                                                                                                  |
| 高级                                                         | 时间轴        | 时间轴用于按时间顺序垂直地展示一系列信息，适用于项目管理、个人简历等场景，按时间顺序排列活动和事件。                                                                                                                                                                                                                                                                                    |
| 高级                                                         | 走马灯        | 常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。 在移动端，鼠标悬停在图片或卡片上，播放不会停止，即不支持悬停效果。                                                                                                                                                                                                                      |
| 高级                                                         | 可收缩面板      | 可收缩面板用于将内容区域收缩或展开，用于隐藏和显示内容，节省页面空间。可伸缩面板仅支持在PC端使用。                                                                                                                                                                                                                                                                                    |
| 高级                                                         | 滚动容器       | 滚动容器组件用于在滚动至底部时触发加载更多数据，通常在展示长列表或文章等场景中使用。                                                                                                                                                                                                                                                                                            |
| 高级                                                         | 选择卡        | 选择卡组件用于展示一组可选项目，用户可将选择项从一栏移动到另一栏。在涉及选列表中的多个数据，如产品列表、用户列表、部门列表时使用。**选择卡组件仅支持在** **PC端** **使用**。                                                                                                                                                                                                                                        |
| 高级                                                         | 栅格容器       | 栅格容器组件用于将页面或组件划分成多个栅格，使用栅格系统进行网页布局，可以使页面排版美观、舒适，在展示多个项目，如产品列表、图片墙时使用。                                                                                                                                                                                                                                                                 |
| 高级                                                         | 代码块        | 代码块组件用于将已编写好的独立HTML代码块渲染出来，**仅支持输入HTML格式的代码**。                                                                                                                                                                                                                                                                                        |
| 高级                                                         | 富文本        | 富文本编辑器，在页面需要提供富文本编辑功能时使用，例如在博客、论坛等需要评论的场景下。**富文本组件仅支持在PC端使用**。                                                                                                                                                                                                                                                                        |
| 高级                                                         | 视频播放       | 视频播放组件，用于视频播放。 - 自动播放属性必须配合是否静音一起设置，例如需要设置视频自动播放时也必须设置是否静音（即为true）。  - 视频播放组件目前只支持播放MP4、OGV和WebM三种格式的视频。   |
| 流程                                                         | 流程-动作      | 根据当前工作流的信息显示可执行的动作，包含提交、委托、转派和完成，**只能与工作流配合使用。**                                                                                                                                                                                                                                                                                      |
| 流程                                                         | 流程-历史      | 根据当前工作流的信息显示执行历史记录，**只能与工作流配合使用。**                                                                                                                                                                                                                                                                                                    |
| 流程                                                         | 流程-附件      | 根据当前工作流的信息显示当前的附件列表，并支持上传附件，**只能与工作流搭配使用。**                                                                                                                                                                                                                                                                                           |
| 流程                                                         | 流程图        | 根据当前工作流的信息显示流程图，只能与工作流配合使用。                                                                                                                                                                                                                                                                                                           |
| 智能化    | 智能助手       | 用于快速生成一个AI对话界面，需要客户提供大模型接口，并配置在连接器中。                                                                                                                                                                                                                                                                                                  |
| 智能化    | Markdown卡片 | 用于渲染Markdown内容的卡片组件，能够将文字、符号等信息按照特定格式呈现，如展示公告、新闻等。                                                                                                                                                                                                                                                                                    |
| 智能化    | 对话列表       | 对话列表组件用于展示用户与大模型之间的对话，构建用户专属的大模型前端对话页面。                                                                                                                                                                                                                                                                                               |
| 智能化    | 对话历史       | 对话历史用于展示用户与大模型的历史对话记录。                                                                                                                                                                                                                                                                                                                |
| 智能化    | 输入卡片       | 输入卡片为对话输入组件，通常用于搭建自己的大模型前端对话页面。                                                                                                                                                                                                                                                                                                       |
   
#### 为标准页面添加组件
标准页面是一种将一个或多个组件拖进画布，进行低代码甚至无代码的配置，即可快速完成业务功能的前端页面。在设计标准页面时，可以直接从左侧"组件"区域，将这些组件拖拽到中间"设计视图"。
图1为标准页面添加组件   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001910718052.gif "点击放大")