页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

(1)在仪表盘编辑界面中新建一个Tab组件。Tab组件默认有三个页签,可以根据实际需求增加/删减;第一个页签默认内置了一个汇总表组件,可以根据实际需求变换类型。

Image RemovedImage Added

(2)切换页签1的组件类型为明细表,在数据选择区中,勾选 发货区域 产品类别  销售量 字段,由系统自动分配到  上;或拖拽 发货区域 产品类别 和 销售量 字段到  

...

5、如果想要编辑Tab组件内部的组件,可以点击页签选中内部资源,或直接点击内部组件,即可对内部组件进行操作;如果想要编辑Tab组件,可以点击页签空白位置选中Tab组件,如下图所示:

Image Modified

3 跑马灯

1、跑马灯又叫轮播图。当内容空间不足时,使用资源轮播展现的形式能更好地利用报表空间资源。通过轮播的切换形式,增加组件内容资源的丰富性,趣味性。

...

(5)最终效果如下图所示:

5 页签下拉菜单

设置项说明如下:

功能

说明

页签操作

添加

添加一个新的页签。

删除

删除所选择的页签。

页签顺序

移至最左

将所选择的页签移动到最左侧。

左移页签

将所选择的页签向左移动一个位置。

右移页签

将所选择的页签向右移动一个位置。

移至最右

将所选择的页签移动到最右侧。

高级设置

在高级设置窗口可自由调整页签顺序。

Image Modified

选择需要调整顺序的页签(可按住 Ctrl 键进行多选),点击顺序按钮调整顺序:

  • 上移至顶:将页签移动到最顶部。
  • 上移:将页签向上移动一个位置。
  • 下移:将页签向下移动一个位置。
  • 下移至底:将页签移动到最底部。
作为筛选器将当前的组件设置为筛选器。
隐藏标题隐藏页签中组件的标题。
复制复制当前的组件到剪贴板中。
粘贴将复制的组件在鼠标悬停的位置进行粘贴。
删除删除页签中的组件。

移除页签

删除所选择的页签。

样式设置
样式设置
6 Tab组件样式设置

6.1 Tab页签

Tab页签的设置项包含显示位置、对齐方式、风格、颜色、样式。

...

设置Tab页签的宽度、样式以及高亮页签(即当前页签)的样式,包含 默认  自定义 两种。

效果简洁模式,样式选择“自定义”,其余配置如下:

简洁模式,样式选择 自定义 ,其余配置如下:

  • 设置页签宽度为“固定宽度”,宽为“80px”。
  • 设置页签的字体为“宋体”,字号为”12px“,字体颜色为”#000000“。
  • 设置高亮页签的字体颜色为”#D0021B“,字体为”斜体“;边框为”虚线“,线条粗细程度为”2“,线条颜色为”#D0021B“。

...

  • ”设置页签的背景为”图片“,点击按钮上传图片,图片拉伸方式为“拉伸”。
  • 设置页签的字体为“宋体”,字号为”12px“,字体颜色为”#000000“;左右边框为“实线”,线条粗细程度为”1“,线条颜色为”#4A90E2“,上下边框为“实线”,线条粗细程度为”1“,线条颜色为”#4A90E2“
  • 设置高亮页签的颜色为“#F8E71C”;字体颜色为”#D0021B“,字体为”斜体“

补充说明

1、图片仅支持上传小于或等于10M的文件:小于300kb 直接上传,300kb-10M 会进行压缩,>10M提示不能上传。

2、图片文件格式支持:jpg、jpeg、png、gif、svg。

3、页签背景、单个页签背景和高亮页签背景选择图片时,图片的拉伸方式有:适应、平铺、拉伸、填充。

拉伸方式

效果

说明

适应

Image Modified

图片等比缩放,图片的最大边放大到页签最小边时就不再放大,即保持图片比例的同时最大化显示图片。
平铺

Image Modified

若图片大小小于页签大小,则图片挨个排列,直到排满整个页签。
拉伸

Image Modified

图片不按比例缩放,根据屏幕显示分辨率拉伸。图片占满整个页签。

填充

Image Modified

图片等比缩放,按照图片的最小边来适应页签的最大边以达到填充页面效果。如果出现图片分辨率和屏幕的比例不一样的情况,图片会有部分显示不了(超出页签之外)。

...

Tab组件设置为Tab和跑马灯时,设置移动端是否可以通过触摸切换Tab页。默认为开启。

效果

设置触摸切换Tab页为开启

tab07.mp4

7

...

更多功能

  • 更多的组件属性设置项的详细介绍,可参考文档: 组件设置 。