跳到主要内容
版本:2.0.3

基础组件

基础组件是常见的界面元素,用于构建用户界面,例如文本、线条形状、图片、按钮、文本输入框、下拉菜单等。这些组件用于与用户进行交互,接收输入或显示输出。

1)静态文本

支持自定义文本内容、样式、背景样式等,常用于展示页面中业务标题或者描述文本。

说明:选中文本后双击即可修改文本内容,回车可换行。

2)线条

支持自定义线型、线宽、颜色等,常用于页面内容分割或装饰。

说明:选中端点拖拉,以另外一个端点为中心进行旋转,拉伸,与此同时按住shift,旋转角度限制为0、45、90、135、180、225、270、315度(八个方位)

3)矩形/圆形

支持自定义形状样式以及文本内容。

说明:双击即可在形状中填充文本内容。

将基础组件添加到画布上,点击选中控件,在右侧属性区进行配置:

image-20230103103650771

4)图片

图片属于外部资源,您可以快捷复制粘贴图片到画布,或通过上传导入图片至【资源库-图库素材】进行存储管理,以便快捷应用;

注意:
1)支持格式:png、jpg、gif、svg
2)上传容量限制: 单张图片容量≤5M

图片管理说明

点击【图库素材】

image-20230104210149250

文件夹管理

用于图片的分组存储管理

1)新增:点击image-20230104204530238,末尾自动新增文件夹

2)编辑:点击image-20230104204637289,重命名文件

3)删除:点击image-20230104204644975,删除文件夹

图片管理

1)添加图片

​ 方式1:点击image-20230621170539209,选择本地图片上传至所选文件夹,支持多选批量上传

image-20230621170604035

​ 方式2:点击空文件夹中“上传图片”,选择本地图片上传至本文件夹,支持多选批量上传

image-20230104205023200

2)下载图片:

  • 单图片下载:悬浮对应的图片,点击下载图标,选择保存路径;
  • 选择下载:点击image-20230621171954865进入图片选择模式,点击需要下载的图片,点击image-20230621172152939将所选图片导出包;
  • 下载分组:点击image-20230621172251020,选择需下载的分组,将分组内图片导出包。

3)编辑图片:悬浮对应的图片,点击编辑图标,重命名图片名

4)删除图片:

  • 单图片删除:悬浮对应的图片,点击删除图标,删除该图片
  • 选择下载:点击image-20230621171954865进入图片选择模式,点击需要下载的图片,点击image-20230621172504836将所选图片批量删除;

应用图片

拖拽图片至画布,即可应用该图片

1)图片支持灵活展示模式:

  • 自适应:图片根据组件宽/高等比缩放(高比),保持原有尺寸比例,可能会有留白。
  • 拉伸:图片拉伸填满整个组件,可能变形
  • 实际大小:图片保持原尺寸大小,若组件大于图片尺寸,不放大存在留白,若组件小于图片尺寸,将裁剪图片部分区域不可见
  • 覆盖:图片根据组件宽/高等比缩放(低比),保持原有尺寸比例,超出部分将裁剪不可见

2)图片支持遮罩功能

  • 开启遮罩功能,该图片将作为遮罩层,遮挡背景(被图片透明部分遮住的部分将不被显示,被不透明部分遮住的部分将显示),可满足只要一张图片即可显示不同颜色效果
  • 若不开启,图片即为原始图片的呈现

image-20230621174201638

5)按钮

交互组件,常用于响应点击行为,触发相应的业务逻辑,业务逻辑您可通过编写事件脚本实现。

6)输入框

交互组件,通过鼠标或键盘输入内容,可通过事件动作获取控件值和设定控件值,实现自定义功能。

7)下拉列表

交互组件,通过列表方式选择内容,可通过事件动作获取控件值和设定控件值,实现自定义功能。

自定义选项:下拉项自定义,选项&值支持列表直接输入,或点击“设置”进行快捷配置(每行1组,选项和值用英文逗号分隔),选择行支持拖拽可上下排序;
关联字段:关联查询数据集某字段内容作为下拉项

8)时间选择

交互组件,通过弹出面板选择日期时间内容,可通过事件动作获取控件值和设定控件值,实现自定义功能。

颗粒度:支持年、年月、日期、日期时间多种粒度选择,