[通用]移动端 Tab 布局

1.1 版本

关于「HTML5移动端展现」插件请参考 HTML5移动端展现 。

1.2 设计方案

支持单个 Tab 标题样式设置，支持 Tab 自定义显示隐藏。

注1：暂不支持自动轮播。

注2：移动端预览步骤请参考 移动端预览 。

2.1 模板设计

在 FineReport 设计器中，点击文件>新建决策报表，在决策报表中拖入 Tab 块，并增加 Tab 块，此步骤可参考 Tab块 。

选中「标题1」，在右侧属性面板中「样式」中选择自定义，为「标题1」设置初始背景和选中背景。如下图所示：

支持的属性及效果如下表所示：

2.2 移动端效果

1）App

2）HTML5

3.1 模板设计

在 FineReport 设计器中，点击文件>新建决策报表，在决策报表中拖入 Tab 块，并增加 Tab 块，此步骤可参考 Tab块 。

选中「标题1」，在右侧属性面板中，不勾选「可见」，如下图所示：

注：自 App9.3 开始，支持此方法来实现单个 Tab 块自定义显示隐藏。

同时还提供 JS 接口，详细点击 [通用]setTabVisible 。

3.2 移动端效果  

1）App

2）HTML5

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 的。