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 的。
上一篇：[通用]自定义组件顺序