最新历史版本 :Tab块 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本
11.0

1.2 应用场景

  • 模板维度、数据较多,又不希望模板页面过长时,可使用 Tab 块,手动切换维度,且可以展示每个维度的标题。

  • 同一个页面有多个明细数据表,不希望每一个都平铺展示出来,可使用 Tab 块,根据实际需要展示数据。

1.3 功能简介

针对您想要分析的某组数据,可以从使用 Tab 设置多个 Tab,分别从多个维度来分析这组数据,查看时切换 Tab 即可,非常方便。

例如:想要分析某工厂的生产情况,可以从产品产量维度、生产线产量维度、库存维度来分析,如下图所示:

3.gif

2. 操作说明编辑

首先我们点击设计器左上角「新建决策报表」,新建一个空白模板。将 body 的布局方式改为「绝对布局」,将 Tab 块拖入 body 中。

注:11.0.3 版本及之后的设计器中,body 布局 中自适应相关设置由右侧属性面板移至菜单栏「模板>PC端自适应属性」中。

如下图所示:

926F6080-2FCF-49A5-A780-04EBA0BCAA30.GIF

添加 Tab 块后,在组件设置列表可以看到一个 Tab 块包含 3 个层级:

  • tablayout : Tab 块的整体

  • tabpane :容纳所有 Tab 页标题的面板

  • Tab :一个 Tab 页的设计区域,支持添加组件

选中 Tab 块后,点击组件右上角的编辑按钮,进入编辑状态,可进行添加、删除、移动 Tab 页等操作。

1)新增:点击 Tab 页标题面板右侧的 6.png 按钮可以新增 Tab 页,默认自动添加在最后面。

C5C03010-1D09-4AA1-81BD-A646F7E4AAC3.GIF

2)移动:使用鼠标右键单击需要移动的 Tab 页,弹出四个选项:移动到首位,往前移动,往后移动和移动到末尾。

4E294462-A8AA-4720-A096-249589F8624C.GIF

3)删除:点击 Tab 标题右上角的 × 按钮,可删除 Tab 页,也可在组件设置列表中选中后直接删除。

31DB6C1F-37DE-4CF5-BA2F-0828CB7BDB38.GIF

3. Tab 属性编辑

3.1 Tab 块整体属性

选中 tablayout 即 Tab 块整体,可在下方属性面板设置其属性。如下图所示:

1635239964NRfB.png

具体属性介绍如下表所示:

属性
属性介绍
组件名称

Tab 块名称默认为 tablayout+数字后缀,从 0 依次累加,支持修改,但不支持为空或重复

坐标·尺寸
  • 绝对布局时,组件大小初始为 500*300,位置可随意放置,支持拖拽和输入数字修改坐标和尺寸

  • 自适应布局下不支持修改坐标

主体填充

可设置 Tab 页背景填充为没有背景、颜色、图片或渐变色,如下图所示:

16352405881EWG.png

外沿样式

可设置 Tab 块整体的外沿样式:

  • 渲染风格:可设置为普通或阴影

  • 边框:可选择为无或不同线型

  • 边框颜色:设置边框颜色

Tab 轮播勾选开启轮播后,Tab 页会开启轮播,可以设置轮播间隔,默认为 1.8 s

注:移动端不支持 Tab 轮播

3.2 Tab 页标题面板

选中 tabpane 即 Tab 页标题面板。如下图所示:

3.2.1 PC 端

tabpane PC 端属性如下表所示:

属性简介
组件名称组件名称默认为 tabpane+数字后缀,从 0 依次累加,支持修改,但不支持为空或重复
坐标·尺寸

可通过修改数值或拖拽标题面板,调整 Tab 标题面板的高度,如下图所示:

注1:组件大小不可以超出 tablayout 的高度范围

注2:组件大小为 0 ,或拖动标题组件到上下线重合时,即可隐藏 Tab 标题

BDBB848B-61A6-4B51-8D61-03CC614CAEA9.GIF

样式模板默认image.png
卡片式image.png
锦旗image.png
书签式image.png
菜单式image.png
五边形image.png
梯形image.png
显示位置Tab 页标题面板的位置可选择:上、下、左、右
背景/字体自定义 Tab 标题背景、Tab 标题字号、字体等
文本方向横排image.png
纵排image.png

3.2.2 移动端

tabpane 移动端属性如下图所示,具体设置请参见:[通用]Tab 组件多样化

3.3 Tab 页

处于编辑状态下的 Tab 页,标题默认灰色,如下图「标题0」,Tab 属性界面如下图所示:

具体设置如下表所示:

属性
简介
组件名称组件名称默认为 Tab+数字后缀,支持修改,但不支持为空或重复
可见

「可见」按钮默认勾选,取消勾选后,设计器界面按钮灰化,预览模板时该 Tab 及其内容不可见

注:模板导出时,被隐藏的 Tab 不会被导出

样式

可以自定义当前 Tab 页标题的初始、鼠标悬浮、选中的背景,均支持设置为颜色、图片或渐变色

注:移动端只支持设置「初始背景」和「鼠标点击背景」,且只支持显示颜色,若设置为图片,则显示为默认颜色

内边距

Tab 设计区域部分,为自适应布局模式,组件添加时自动充满 Tab 页,可以设置内边距

  • 默认 Tab 页的上下左右内边距都为 0

  • 每个 Tab 页可以设置不同的内边距

组件间隔和内边距一样,每个 Tab 页可以设置各自的内部组件间隔
标题当前编辑的 Tab 的标题,可以修改当前编辑 Tab 的标题名,修改后设计区域会及时体现