1. 概述
1.1 版本
| 报表服务器版本 | App 版本 | HTML5 移动端展现插件版本 |
|---|---|---|
| 11.0 | V11.0 | V11.0 |
1.2 应用场景
实现不同 Tab 系列下不同维度的数据分析时，用户可选择并设置多样化的 Tab 标签面板样式，使多维度模板更加清晰和简洁。
1.3 功能简介
移动端提供更为丰富的 Tab 效果，共有 5 类移动端样式模板：「默认」、「上菜单式」、「下菜单式」、「滑动式」、「联排式」，如下图所示：
注：5 类移动端样式模板下， Tab 内图表块、报表块组件内部不支持上下左右滑动，不支持放大。
2. 功能入口
1）点击下载模板：Tab组件移动端样式模板.frm ，在 FineReport 设计器中打开该模板。
2）选中右侧属性面板中的「组件设置>tabpane0」。
3）点击「移动端」，点击「样式模板」旁的「...」按钮，可以看到 样式模板 有 5 种样式：「默认」、「上菜单式」、「下菜单式」、「滑动式」、「联排式」，如下图所示：
3. 默认
「默认」样式不可设置。
1）样式模板 选择「默认」，点击「确定」，如下图所示：
2）App 及 HTML5 端效果预览如下图所示：
注：样式模板 为「默认」时，若 Tab 块标题较长，显示不全的部分用省略号代替。
4. 上菜单式
4.1 设定
tab样式 分为「标准」和「自定义」。
1）tab样式 为「标准」时，不可自定义设置 tab样式 。
2）tab样式 为「自定义」时，可自定义设置 tab样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 显示间隔 |
| |
| 背景 | 初始填充 | 支持设置 Tab 块初始填充背景颜色 |
| 选中填充 | 支持设置 Tab 块选中填充背景颜色 | |
| 字符 | 初始字符 | 支持设置 Tab 块初始字符的字体、字号（默认为15，设置范围为1-99之间的整数）、字体颜色、加粗、倾斜 |
| 选中字符 | 支持设置 Tab 块选中字符字体颜色 | |
| 下边框 | 线型 | 支持设置 Tab 块下边框线型 |
| 颜色 | 支持设置 Tab 块下边框颜色 | |
| 下划线 | 线型 | 支持设置 Tab 块下划线线型 |
| 颜色 | 支持设置 Tab 块下划线颜色 | |
4.2 示例
1）样式模板 选择「上菜单式」，tab样式 选择「自定义」。
2）配置具体设置项，点击「确定」，如下图所示：
3）App 及 HTML5 端效果预览如下图所示：
注：样式模板 为「上菜单式」时，若 Tab 块标题较长，显示不全的部分用省略号代替。
5. 下菜单式
5.1 设定
tab样式 分为「标准」和「自定义」。
1）tab样式 为「标准」时，不可自定义设置 tab样式 。
2）tab样式 为「自定义」时，可自定义设置 tab样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 背景 | 初始填充 | 支持设置 Tab 块初始填充背景颜色 |
| 选中填充 | 支持设置 Tab 块选中填充背景颜色 | |
| 字符 | 初始字符 | 支持设置 Tab 块初始字符的字体、字号（默认为15，设置范围为1-99之间的整数）、字体颜色、加粗、倾斜 |
| 选中字符 | 支持设置 Tab 块选中字符字体颜色 | |
| 图标 | 初始图标 | 支持设置 Tab 块初始图标 注：建议使用48*48规格的 PNG 图片 |
| 选中图标 | 支持设置 Tab 块选中图标 注：建议使用48*48规格的 PNG 图片 | |
| 分割线 | 线型 | 支持设置 Tab 块分割线线型 注：移动端不支持 App 显示分割线 |
| 颜色 | 支持设置 Tab 块分割线颜色 | |
5.2 示例
1）样式模板 选择「下菜单式」，tab样式 选择「自定义」。
2）配置具体设置项，点击「确定」，如下图所示：
3）App 及 HTML5 端效果预览如下图所示：
注：样式模板 为「下菜单式」时，若 Tab 块标题较长，显示不全的部分用省略号代替。
6. 滑动式
6.1 设定
tab样式 分为「标准」和「自定义」。
1）tab样式 为「标准」时，不可自定义设置 tab样式 。
2）tab样式 为「自定义」时，可自定义设置 tab样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 背景 | 填充 | 支持设置 Tab 块填充背景色 |
| 字符 | 初始字符 | 支持设置 Tab 块初始字符的字体、字号（默认为15，设置范围为1-99之间的整数）、字体颜色、加粗、倾斜 |
圆点指示器 | 初始填充 | 支持设置圆点显示器初始填充颜色 |
| 选中填充 | 支持设置圆点显示器初始填充颜色 | |
6.2 示例
1）样式模板 选择「滑动式」，tab样式 选择「自定义」。
2）配置具体设置项，点击「确定」，如下图所示：
3）App 及 HTML5 端效果预览如下图所示：
注：样式模板 为「滑动式」时，若 Tab 块标题较长，显示不全的部分用省略号代替。
7. 联排式
7.1 设定
tab样式 分为「标准」和「自定义」。
1）tab样式 为「标准」时，不可自定义设置 tab样式 。
2）tab样式 为「自定义」时，可自定义设置 tab样式 。
具体设置项说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 控件边距 |
| |
| 控件背景 | 初始填充 | 支持设置按钮初始填充背景色 |
| 选中填充 | 支持设置按钮选中填充背景色 | |
| 边框 | 线型 | 支持设置按钮边框线型 |
| 颜色 | 支持设置按钮边框颜色 | |
| 圆角 | 支持设置按钮边框圆角，默认为2 | |
| 字符 | 初始字符 | 支持设置按钮初始字符的字体、字号（范围为1-99之间的整数，默认为15）、字体颜色、加粗、倾斜 |
| 选中字符 | 支持设置选中字符的字体颜色 | |
7.2 示例
1）样式模板 选择「联排式」，tab样式 选择「自定义」。
2）配置具体设置项，点击「确定」，如下图所示：
3）App 及 HTML5 端效果预览如下图所示：
注：样式模板 为「联排式」时，若 Tab 块标题较长，多余的部分不显示。
8. Tab 标签面板冻结
Tab 内容过多超过手机屏幕一屏，下拉后无法快速切换 Tab 标签页。为了方便用户切换 Tab 标签页，移动端 Tab 标签面板支持冻结。
选中 body ，移动端属性选择「手机重布局」，「竖屏」显示模板时，支持上下滑动 Tab 页：
Tab 样式为「默认样式」、「上菜单式」、「联排式」时，Tab 标签面板始终固定在「页面顶端」。
Tab 样式为「下菜单式」、「滑动式」时，Tab 标签面板不会冻结。
注：当 Tab 在绝对画布中时，移动端 Tab 标签面板不支持冻结。
上一篇：决策报表控件移动端样式
