标准页面组件分类
标准页面组件包括系统预置的基本组件和用户自定义的扩展组件,基本组件具体说明如表1所示。如果需要了解每个基本组件的详细使用说明,请将鼠标悬浮在基本组件上,基本组件右上方会出现问号图标
,单击该图标会出现该基本组件的使用说明。
表1 基本组件分类说明
分类 |
说明 |
布局 |
用于控制页面的布局,即将页面划分为几行几列。例如,先拖入一个栅格容器,将栅格容器用行列划分成小区域后,再向单元格中拖入其他组件。容器本身可以包含容器,也可以包含其他组件。
- 表单:具有数据收集、校验和提交功能的表单,通常用于制作带数据的交易类页面。
- 表格/表格(新):主要用于展示大量结构化的数据,使用时需要通过数据绑定数据模型。适用于通过一个表格,完成数据对象的增、删、改、查的操作场景。
- 容器:基本的布局容器,支持拖拽放置任何组件进去,按照流式布局模式布局(非独占整行组件如按钮组件,从左往右排列,占满整行即换行;独占整行组件如标题组件,则默认独占一行)。
- 分栏:容器组件,相当于行,内部支持分为多栏(列)。通过该组件,可将页面划分为两栏或多栏,每一栏都可以拖入其他组件。
- 折叠面板:用于对页面的某些区域进行折叠和展开。
- 页签:选项卡切换组件,通常用于平级区域大块内容的收纳和展示。
- 列表视图:用于灵活组合列表项的内容,并且根据实例化数据动态展示。
- 模态框:模态对话框,在保留当前页面状态的情况下,在浮层中显示。
|
表单 |
- 输入框:文本输入框,关联对象文本(text)类型,可编辑一行的文本控件,包含标签。适用于普通文本输入。
- 多行输入框:多行文本输入区域,关联对象文本区(Text Area)类型,多行可编辑的文本控件。适用于多行文本输入。
- 日期选择框:用于选择或输入日期,关联对象日期(Date)类型、日期/时间(Date/Time)类型,可以选择或输入日期,支持年、月、日期等类型。
- 数字输入框:数字(Number)类型的输入框,关联对象数字类型。
- 复选按钮:该控件允许用户从多个选项中进行多种选择。
- 单选按钮:用于一组可选项的单项选择,或者切换某个选项的选中状态,以实现从一组互斥的选项组中选择一项。
- 下拉框:使用下拉菜单,展示并选择内容。
- 级联选择框:从一组相关的数据集合中进行选择,和下拉框相比,可一次性完成选择,体验更好。
- 开关:在两种状态间切换时用到的开关选择器。
- 上传:文件选择上传和拖拽上传控件,可以通过绑定数据模型,上传文件列表会保存在绑定的模型中。
- 自动完成:带有提示的文本输入框。
- 关联选择框:一个搜索的选择框,关联对象的查找关系(lookup)或主从关系(masterdetail)类型,可以通过搜索来匹配下拉的选项,匹配成功的选项会展开在下拉列表中。
- 弹出对话框:弹出对象选择框,可弹出自定义页面。
- 多语言选择框:多语言切换组件,根据系统设置的多语言信息,展示配置项。
- 评分:评分、评价组件。
|
基本 |
- 按钮:通过编排事件实现Button,触发业务逻辑使用。
- 按钮卡:包含多个按钮(两个或更多)的整体面板。该组件可用于构建多项菜单,用于在视图之间导航。
- 标签:用于显示页面信息的静态文本。
- 图标:用于辅助相关文字进行展示,也可当做按钮单击使用,通常需要配合其他组件一起使用。
- 标题:用于添加具有标题意义的文字,可以通过选择属性“标题类型”的值,来控制添加标题的文字大小。
- 链接:链接地址,用于链接、跳转,一般常用来打开新页面或作为文字性按钮使用。
- 图片:用于上传图片,可以从OBS或者SFTP选择或上传图片。
- 面包屑:显示网站的层级结构,告知用户当前所在的位置,如“首页/菜单1/菜单2/菜单3”。
- 滑块:滑块是一个可以利用鼠标在其上面进行滑动的条状组件,一般使用在进度条,区域划分等组件中。当鼠标在轨道上单击时,滚动球会移动到当前鼠标单击的位置,单击过的地方会以蓝色显示,未单击的地方是灰色。
- 分页:当数据量较多时,使用分页可快速进行数据切换。
- 二维码:二维码生成组件。
|
高级 |
- 选项树:数据为树形结构时,可使用该组件,以完整展示树形结构数据的层级关系,并具有展示、收起、选择等交互功能。
- 步骤条:引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤。
- 时间轴:一般绑定数据服务使用,动态的展示时间轴的内容。
- 走马灯:常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
- 可收缩面板:弹性伸缩布局,用于将内容区域收缩/展开。
- 滚动容器:当页面内容已超出屏幕的范围时,需要拉动滚动条,在有限的屏幕中浏览更多内容。
- 选择卡:用于将多个项目,从一边移动到另一边。
- 栅格容器:用于控制页面的布局,即将页面设计几行几列,先设置元素在页面中纵向排列,然后在每一行中又可设置元素横向排列。
- 代码块:用于代码块展示。
- 富文本:富文本编辑器。
- 视频播放:视频播放组件,用于播放视频。
|
流程 |
- 流程-动作:流程中使用的动作组件。
- 流程-历史:流程中使用的历史记录组件。
- 流程-附件:流程中使用的附件组件。
- 流程图:流程中使用的流程图组件。
|
为标准页面添加组件
标准页面是一种将一个或多个组件拖进画布,进行低代码甚至无代码的配置,即可快速完成业务功能的前端页面。在设计标准页面时,可以直接从左侧“组件”区域,将这些组件拖拽到中间“设计视图”。
图1 为标准页面添加组件