页面树结构

版本比较

标识

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

...

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

Image RemovedImage Added

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

...

(5)在Tab组件的 更多 菜单中默认勾选的是 Tab,所以我们在作普通的Tab时可以不用勾选,当有跑马灯或者下钻的需求时再自行切换。

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

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

Image Added

3 跑马灯

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

...

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

5 页签下拉菜单

设置项说明如下:

功能

说明

页签操作

添加

添加一个新的页签。

删除

删除所选择的页签。

页签顺序

移至最左

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

左移页签

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

右移页签

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

移至最右

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

高级设置

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

Image Modified

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

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

移除页签

删除所选择的页签。

样式设置
样式设置
6

...

Tab组件样式设置

6.1 Tab页签

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

6.1.1 显示位置

说明

设置Tab页签的显示位置。默认为居上。

效果

6.1.2 对齐方式

说明

设置Tab页签的对齐方式。默认为左。

效果

6.1.3 风格

说明

设置Tab页签的风格。默认为简洁。

效果

6.1.4 颜色

说明

设置Tab页签的背景颜色。

效果

信息

样式设置为自定义时,颜色设置项置灰不可用。样式 设置为 自定义 时, 颜色 设置项置灰不可用。

6.1.5 样式

说明设置Tab页签的宽度、样式以及高亮页签(即当前页签)的样式。

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

效果

...

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

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

卡片模式,样式选择“自定义”,其余配置如下:

  • ”设置页签的背景为”图片“,点击按钮Image Modified上传图片,图片拉伸方式为“拉伸”。
  • 设置页签的字体为“宋体”,字号为”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

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

6.2

...

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

...

高级

高级的设置项包含定时刷新、轮播时间和触摸切换Tab页。

6.3.1 定时刷新

说明

设置Tab组件浏览时刷新数据的时间频度。默认为0秒/次。

效果

设置定时刷新为3秒/次

6.3.2 轮播时间

说明

Tab组件设置为跑马灯时,设置页签的轮播时间。默认为3秒。

效果

设置轮播时间为5秒

6.3.3 触摸切换Tab页

说明

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

效果

设置触摸切换Tab页为开启

tab07.mp4

7 更多功能

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