反馈已提交

网络繁忙

Tab块

  • 文档创建者:文档助手1
  • 编辑次数:45次
  • 最近更新:Alicehyy 于 2022-01-05
  • 1. 概述

    1.1 版本

    报表服务器版本
    11.0

    1.2 应用场景

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

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

    1.3 功能简介

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

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

    3.gif

    2. 操作说明

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

    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 块整体,可在下方属性面板设置其属性。如下图所示:

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

    属性
    属性介绍
    组件名称

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

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

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

    主体填充

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

    外沿样式

    可设置 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+数字后缀,从 0 依次累加,支持修改,但不支持为空或重复
    可见

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

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

    样式

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

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

    内边距

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

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

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

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


    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭