1. 概述
1.1 版本
移动端版本 | HTML5 移动端展现 |
---|---|
App10.1 及以上 | V6.0 及以上 |
关于「HTML5移动端展现」插件请参考 HTML5移动端展现 。
1.2 设计方案
支持单个 Tab 标题样式设置,支持 Tab 自定义显示隐藏。
注1:暂不支持自动轮播。
注2:移动端预览步骤请参考 移动端预览 。
2. 单个 Tab 标题样式设置
2.1 模板设计
在 FineReport 设计器中,点击文件>新建决策报表,在决策报表中拖入 Tab 块,并增加 Tab 块,此步骤可参考 Tab块 。
选中「标题1」,在右侧属性面板中「样式」中选择自定义,为「标题1」设置初始背景和选中背景。如下图所示:
支持的属性及效果如下表所示:
属性 | 是否支持 | 说明 |
---|---|---|
标题样式 | 支持 | 支持设置样式为自定义 |
初始背景 | 支持 | 只支持颜色,如果设置为图片,则识别为默认 |
鼠标浮动背景 | 不支持 | |
鼠标点击背景 | 支持 | 只支持颜色,如果设置为图片,则识别为默认 |
2.2 移动端效果
1)App
2)HTML5
3. 单个 Tab 自定义显示隐藏
3.1 模板设计
在 FineReport 设计器中,点击文件>新建决策报表,在决策报表中拖入 Tab 块,并增加 Tab 块,此步骤可参考 Tab块 。
选中「标题1」,在右侧属性面板中,不勾选「可见」,如下图所示:
注:自 App9.3 开始,支持此方法来实现单个 Tab 块自定义显示隐藏。
同时还提供 JS 接口,详细点击 [通用]setTabVisible 。
3.2 移动端效果
1)App
2)HTML5
4. 整个 Tab 自定义显示隐藏
4.1 模板设计
1)打开模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\financial2\生产库存分析.frm
在右侧属性面板「控件设置」中,选择 tabpane0,设置控件大小为 0 ;或者拖动标题组件到上下线重合,即可隐藏 Tab 标题。
如下图所示:
4.2 移动端效果
1)App
2)HTML5
注:整个 Tab 标题隐藏时,「HTML5 移动端展现」插件版本若在 10.2.21 之前,HTML5 预览时是不能实现左右滑动切换 Tab 的。