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 块分割线线型 |
| 颜色 | 支持设置 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 边界的距离，默认为 4 |
| 显示该层级下的组件导航 | 支持设置显示该层级下的组件导航 注：选中 tabpane0 ， 勾选「显示该层级下的组件导航」后，tabpane0 的上一级 tablayout0 必须勾选「使用导航」，body 的 导航样式 必须设置为「侧边导航」，tab 的组件导航才会显示。 |
| 显示标题 | 支持设置是否显示 tab 标签页标题，默认勾选 |
| 支持滑动切换 | 支持设置 滑动切换 ，设置后，无需点击或滑动 tab 按钮，即可切换 tab 页 |
| 显示圆点指示器 | 支持设置是否显示 圆点指示器
注：「滑动式」的 圆点显示器 的初始填充色和选中填充色按照「滑动式> tab 样式」自定义中的设置生效 |
9. 布局编辑
移动端面板布局属性的界面如下图所示，支持设置组件间隔，默认为 4 。
10. Tab 标签面板冻结编辑
Tab 内容过多超过手机屏幕一屏，下拉后无法快速切换 Tab 标签页。为了方便用户切换 Tab 标签页，移动端 Tab 标签面板支持冻结。
选中 body ，移动端属性选择「手机重布局」，「竖屏」显示模板时，支持上下滑动 Tab 页：
Tab 样式为「默认样式」、「上菜单式」、「联排式」时，Tab 标签面板始终固定在「页面顶端」。
Tab 样式为「下菜单式」、「滑动式」时，Tab 标签面板不会冻结。