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


