1.1 版本

1.2 应用场景

用户在实现不同 Tab 系列下不同维度的数据分析时，多样化的 Tab 组件可供用户自定义设置及选择 ，使多维度模板更加清晰和简洁。

1.3 功能简介

移动端提供更为丰富的 Tab 效果，推出 4 类移动端专属 Tab 样式：默认、上菜单式、下菜单式、滑动式。

2.1 模板准备

在 FineReport 设计器中，打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\analytics\financial\021-妙用Tab底部样式.frm 模板。

模板下载：化工集团月报_资本-phone.frm

注1：样式模板为「默认」时，属性面板右侧控件设置中选中 tabpane ，「属性」 Tab 下的设置有效。

注2：该模板的 Tab 组件已设置为下菜单式，用户可重新自定义设置。

1）因此，在右侧属性面板「控件设置」中选中 tabpane0，在「属性」 Tab 下样式模板中，将「锦旗」修改为「默认」。如下图所示：

2）在右侧属性面板「控件设置」中选中 tabpane0，点击移动端>样式模板，可对 Tab 组件样式进行自定义设置 。如下图所示：

2.1 默认

2.1.1 界面介绍

「样式模板」选择默认，如下图所示：

2.1.2 移动端效果

1）APP

2）HTML5

注：由此可见，「样式模板」为默认时，Tab 块标题可能会显示不全

2.2 上菜单式

2.2.1 界面介绍

「样式模板」选择 上菜单式，Tab 样式为自定义，如下图所示：

• Tab 样式：包含「标准和「自定义」两个选项，默认为标准。

• 显示间隔：包含间隔固定和标题宽度固定两个选项。

• 背景：可对初始背景和选中背景选择颜色。

• 字符：可对初始字符和选中字符进行自定义设置。

• 下边框：对 Tab 组件下边框的线型和颜色进行设置。

• 下划线：对选中 Tab 块的下划线的线型和颜色进行设置。

2.2.2 移动端效果

1）APP

2）HTML5

注：当 Tab 标题过长时，使用上菜单式标题不会被截断。

2.3 下菜单式

2.3.1 界面介绍

「样式模板」选择下菜单式，Tab 样式为自定义，如下图所示：

• Tab 样式：包含「标准」和「自定义」两个选项，默认为标准。

• 背景：可对初始背景和选中背景选择颜色。

• 字符：可对初始字符和选中字符进行自定义设置。

• 图标：支持自定义添加图标。

• 分割线：可设置相邻 Tab 块之间分割线的线型和颜色。

下菜单式支持自定义添加图标，选中要设置图标的 Tab 块对应的图标，点击编辑 ，在选择图标界面可选择图标；

用户可以在 选择图标 界面中点击增加按钮，自定义上传图标图片，再进行选择。

下图以为 线索 Tab 块设置初始图标的步骤，「选中图标」设置方法与此相同。

设置方法如下图所示：

注：自定义上传图标图片时，建议使用 48×48 规格的 PNG 图片。

2.3.2 移动端效果

注：由于「021-妙用Tab底部样式.frm」模板中样式模板已设置了下菜单式，此处移动端效果是取消模板原先下菜单式设置，恢复设计器默认下菜单式设置的效果。

1）APP

2）HTML5

2.4 滑动式

2.4.1 界面介绍

「样式模板」选择 滑动式，Tab 样式为自定义，如下图所示：

• Tab 样式：包含「标准」和「自定义」两个选项，默认为标准。

• 背景：可填充背景颜色。

• 字符：可对初始字符进行自定义设置。

• 圆点指示器：可填充初始圆点和选中圆点的颜色。

2.4.2 移动端效果

1）APP

2）HTML5

1）Tab 标题冻结，只在手机重布局且采用上菜单式 &amp；默认样式时生效，仅竖屏生效

2）手机重布局下绝对画布块中不支持 Tab 标题冻结。

3）非手机重布局下不支持 Tab 标题冻结，包括竖屏和横屏