跳到主要内容
版本:Next

容器组件

1.画面容器

1.1概述

​ 画面容器是为了方便使用者做内容切换,所提供的一个容器组件。在容器中可嵌套画面内容,配合下拉菜单或事件动作功能,控制容器中页面的切换,如下效果示:

1.2配置说明

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

image-20230103171229158

  1. 目标画面:非必选,可直接关联画面,进行运行初始化展示,也可后续配合下拉菜单或事件动作功能,动态控制容器内展示的画面;
  2. 容器尺寸:
  • 若容器尺寸固定,容器内容保存原始大小,或适应容器宽或高进行缩放
  • 若容器尺寸自适应容器内容,则容器内容保存原始大小

1.3应用案例:系统导航

1)搭建系统导航:菜单+画面容器

image-20231019105859285

2)配置菜单项:

​ 点击菜单项[编辑]按钮,输入菜单项名称,选择跳转至对应的目标页面,选择下方的容器作为目标。配置完成后可点击对应菜单项,下方容器跳转切换至对应的目标页面。

image-20231019111448646

使用tip1:选中对应记录,点击目标列上的操作图标,可将目标快速同步至所有菜单项,实现批量操作

3)运行效果:

菜单+容器案例效果

注:系统支持画面容器多层嵌套,如主页面里嵌子页面,子页面嵌次子页面,限制最多4层,运行时检测达到嵌套层数上限,后续的容器页面将不加载。

2.画面轮播

2.1概述

屏幕中轮播页面需求在企业中控室相当常见,按序轮番显示相关内容,以满足监控多任务的处理。

功能介绍

  1. 自动轮播

支持预定义页面顺序,运行后将按照一定的时间间隔自动切换至下一个页面,实现页面轮播效果。

  1. 手动上下切换页面

除了支持自动轮播功能外,还支持手动快速切换上下页面。

  1. 整体/局部区域轮播

支持窗口整个区域或部分区域作为轮播区域,这取决于您配置画面轮播组件占据窗口页面的尺寸位置情况。

2.2配置说明

将页面轮播组件添加到画布上,选中控件,在右侧属性区进行配置:

image-20231019135044959

  1. 目标画面:预定义页面队列,点击[+]按钮添加页面,可拖拽调整页面顺序

  2. 自动轮播:勾选后,组件将按设定的频率定时切换至下一个页面并循环(自动轮播)

  3. 容器尺寸:

    • 若容器尺寸固定,容器内容可保存原始大小,或适应容器宽或高进行缩放;

    • 若容器尺寸自适应容器内容,则容器内容保存原始大小;

  4. 切换动作:

    • 拖拽[按钮],配置事件:鼠标点击时,页面轮播组件执行切换画面动作,目标页面为上一项/下一项。

    • 运行后,点击该按钮即可手动控制快速切换上个页面/下个页面。

      image-20231019151621331

##3.网页容器

3.1概述

支持嵌套URL,集成第三方web内容。

3.2配置说明

  1. 网址:请输入URL(注意部分网址出于安全策略考虑不支持嵌套,若无法嵌套显示请联系对应网址的负责人)。
  2. 全屏:默认不勾选,勾选后组件右上角显示全屏icon,点击可全屏查看网页内容。

image-20240415160122083