反馈已提交

网络繁忙

FVS_Tab组件

  • 文档创建者:Carly
  • 历史版本:16
  • 最近更新:Tracy.Wang 于 2024-09-18
  • 1. 概述

    适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FineVis 的相关功能。

    1.1 版本

    报表服务器版本
    插件版本功能变动
    11.0.22V2.3.1轮播器改造升级为 Tab 组件。历史轮播器组件请参考 FVS轮播器组件
    11.0.22
    V2.6.1
    Tab 组件支持关闭移动端切换动画。详情请参见 6.3 节
    11.0.22V2.9.1Tab 组件自动轮播修改为默认不开启。详情请参见 6.1 节
    11.0.22V2.10.0Tab 组件标签页新增「标题内容,支持重复、为空。详情请参见第 4 节

    1.2 功能简介

    「Tab组件」是一种容器,可添加多个标签页,每个标签页均支持拖入多个组件或组合,支持按照一定规则轮播或手动切换。

    注:Tab 页加载逻辑为懒加载,切换标签页时才加载新标签页的内容。

    lkunbo.gif

    注:本文仅为大家介绍「Tab 组件」特有功能,其他属性不赘述。

    组件交互请参见:FVS组件交互属性 。

    组件动画请参见:FVS组件动画 。

    组件属性请参见:FVS组件样式属性 。

    2. 添加 Tab 组件

    新建一张 FVS 可视化看板:

    909-1703.png

    在组件区「容器」中点击或拖拽「Tab」组件到画布,默认显示「请将组件/组合拖入Tab内,添加的组件/组合可以在Tab标签页内自由布局」。

    如下图所示:

    909-1706.png

    3. 组件移入移出

    直接拖拽组件区或本页面中其他组件/组合到 Tab 标签页上方,出现提示「释放进入Tab当前标签页」,松开鼠标,即可将其拖入 Tab 标签页。

    Tab 标签页内布局规则和 绝对画布 一致:

    • 拖入组件时,组件大小不变。

    • 组件位置若超出标签页左/上边界,则组件拖入后自动对齐左/上边界;其余位置则以组件释放位置为准,支持超出标签页右/下边界。

    • 若组件超出标签页右/下边界,选中标签页或标签页内的组件,出现横向/纵向滚动条(预览时悬浮出现),可滚动查看。

    注:标签页中支持再次拖入 Tab 组件,但最多支持 3 层 Tab 嵌套。

    如下图所示:

    909-1711.gif

    也支持在组件图层列表中,拖拽组件图层顺序移入标签页,拖入位置默认在标签页中心位置。如下图所示:

    909-1720.gif

    组件移出包括以下三种方式:

    • 直接拖拽组件到 Tab 外,出现提示「释放移出标签页」,松开鼠标,即可将其移出 Tab 标签页。此时移出的组件位置以释放位置为准。

    • 在组件图层列表或 Tab 列表中,直接拖拽组件图层顺序移出 Tab 层级。此时移出的组件位置保持不变。

    • 在 Tab 列表,悬浮组件,点击「更多>移出」即可将组件移出 Tab 。此时移出的组件默认显示在 Tab 组件右侧。

    如下图所示:

    909-1728.gif

    4. Tab 列表及标签页

    添加 Tab 组件时,自带一个标签页,支持添加多个标签页。

    右侧 Tab 列表中展示所有 Tab 标签页和标签页内的组件,和左侧组件图层中展示内容一致。

    标签页支持单独设置「名称标题内容边框背景边框线圆角半径

    • 「名称」为实际名,默认值为标签页X_TabX_页面X」。

    • 「标题内容」为显示名,默认值为「标签页X

    注1:「标题内容」为 V2.10.0 版本新增。历史模板的「标题内容」取原「名称」的值。

    注2:Tab 组件名称、Tab 标签页名称及 Tab 内组件的名称均不支持重名。Tab 标题内容支持重复。

    注3:「标题内容」仅体现在画布的 Tab 页签中,Tab 列表、组件图层、画布中页签选中、JS 调用、交互事件设置的调用对象等场景仍使用「名称」。

    909-1653.png

    在 Tab 列表中,也支持添加标签页,支持重命名、删除、隐藏、锁定对象等操作。仅剩一个标签页时,删除标签页即删除 Tab 组件。

    支持从下向上拖拽标签页,改变标签页顺序。不支持从上向下拖拽标签页,可使用调整层级>下移一层。

    909-1753.gif

    5. Tab 内容设置

    选中 Tab 整体,在 Tab 列表下方「内容」配置面板中,可对标签页和切页按钮进行设置。

    5.1 标签页

    5.1.1 调整锁定

    勾选「启用调整锁定」时,调整 Tab 大小,内部组件大小也会等比例变化。
    909-1757.gif

    5.1.2 内边距

    当模板选择「移动端」模式且开启 移动端布局 时,Tab 组件支持设置标签页内边距、组件间隙及预览高度自适应。

    909-1701.png

    5.2 切页按钮

    勾选「显示切页按钮」,可选择使用「Tab栏按钮」或「导航器按钮」。

    5.2.1 Tab栏按钮

    Tab 栏按钮设置如下图所示:

    909-1800.png

    各设置项的具体说明如下表所示:

    设置
    说明
    显示策略
    • 固定显示:预览时,Tab栏按钮默认显示在组件上

    • 悬浮显示:预览时,Tab栏按钮默认不显示,当鼠标悬浮在 Tab 组件上时,Tab栏按钮出现

    样式模板

    支持三种样式:科技样式、联排样式或下划线式,区别仅在于按钮样式的不同

    布局方式
    • 自然布局:根据标签页名称的长度和按钮字号,按照合适的长度自适应显示 Tab栏,超出 Tab 组件尺寸时,出现翻页箭头

    • 等分布局:根据 Tab 组件的长度/高度,以及标签页个数,等分 Tab栏,每个 Tab按钮的长度一致

    按钮位置可调整 Tab栏按钮的位置,支持上、下、左、右四种
    字符样式可调整 Tab栏按钮中的文字字体、大小等,Tab栏的大小随文字大小自适应调整
    文字位置仅当布局方式选择「等分布局」时,可设置 Tab栏按钮中的文字位置,支持居左、居中、居右
    按钮样式

    样式模板为「科技样式」时,可设置项如下:

    • 按钮样式:可分别设置按钮未选中和选中时,按钮文字对应的字符颜色

    • 按钮底图:内置了五种底图样式可供选择,可改变底图色相

    • 翻页箭头:仅当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时,支持设置翻页箭头。内置了四种箭头样式可供选择,可改变箭头色相

    Snag_e218a62a.png

    样式模板为「联排样式」时,可设置项如下:

    • 按钮样式:可分别设置按钮未选中和选中时,按钮文字对应的字符颜色、按钮背景的填充颜色以及按钮的边框线样式

    • 圆角:可对 Tab栏按钮整体设置圆角效果

    注:联排样式下,当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时,默认存在翻页箭头,不支持设置

    Snag_e219f138.png

    样式模板为「下划线式」时,可设置项如下:

    • 按钮样式:可分别设置按钮未选中和选中时,按钮文字对应的字符颜色、按钮下划线样式和颜色

    注:下划线式下,当布局方式为「自然布局」且 Tab栏按钮超出 Tab 尺寸时,默认存在翻页箭头,不支持设置

    Snag_e22baa93.png

    5.2.2 导航器按钮

    导航器按钮设置如下图所示:

    909-1801.png

    各设置项的具体说明如下表所示:

    设置
    说明
    显示策略
    • 固定显示:预览时,导航器按钮默认显示在组件左右两侧

    • 悬浮显示:预览时,导航器按钮默认不显示,当鼠标悬于 Tab 时,导航器按钮出现

    大小用于调整导航器按钮的尺寸大小
    颜色用于调整导航器按钮以及导航点的颜色
    不透明度用于调整导航器按钮的透明度
    导航点控制底部导航点是否出现

    导航器和导航点的位置如下图所示:

    6. Tab 交互属性

    选中 Tab 整体,点击「交互」,支持设置「自动轮播」和「标签切换事件」。如下图所示:

    909-1802.png

    6.1 自动轮播

    V2.9.1 之前版本,默认勾选「开启自动轮播」,考虑对性能的影响,V2.9.1 及之后版本,默认不勾选「开启自动轮播」。

    • 不开启自动轮播时,Tab 组件默认显示 Tab列表中的第一个标签页内容。用户需要通过切页按钮查看其他标签页内容。

    • 开启自动轮播时,可设置轮播间隔,默认为 6000 毫秒。Tab 组件按照 Tab列表中的顺序和轮播间隔时间,循环展示各标签页内容。轮播时,鼠标悬浮 Tab,轮播暂停,鼠标移出 Tab,轮播继续。 

    6.2 标签切换事件

    「标签切换事件」支持的事件类型包括:组件联动、三维模型动画和 JavaScript 。更多内容请参见:FVS组件交互属性 。

    6.3 移动端滑动切页

    当模板选择「移动端」模式时,支持「开启切换动画」;开启切换动画后,还支持「开启滑动切页」。

    • 开启切换动画后,移动端预览时,切换 Tab 页有左右滑动的动画效果。

    • 开启滑动切页后,可实现手势滑动切换 Tab 页。

    注:V2.6.1 之前的版本中,仅支持「开启滑动切页」,不支持配置切换动画,左右滑动的切换动画始终存在。

    909-1804.png

    7. 兼容说明

    升级 V2.3.1 版本后,旧模板中已有的轮播器组件,兼容生成 Tab 组件标签页,原有功能均可正常使用。

    需要注意的是,若原先轮播器组件未启用 Tab 栏按钮,启用后 Tab 栏内容按照标签页实际名称显示。

    若原先轮播器组件启用了 Tab 栏按钮,那么标签页的实际名称按照 Tab 组件规则生成,但 Tab 栏按钮显示的内容仍保持原来的内容。

    如下图所示:

    Snag_feadaf6.png

    8. 相关推荐

    学习 Tab 组件基础使用后,推荐您更多进阶内容:

    文档索引
    方法简介
    FVS控件切换Tab页利用控件组件,通过接口实现控件切换 Tab 页
    FVS自定义按钮切换Tab页
    利用标题组件,通过接口实现自定义按钮切换 Tab 页

    附件列表


    主题: FineVis数据可视化
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持