[通用]TAB标签面板样式

1.1 版本

1.2 应用场景

在实现不同 Tab 系列下不同维度的数据分析时，用户可选择并设置多样化的 Tab 标签面板样式，使多维度模板更加清晰和简洁。

1.3 功能简介

移动端提供更为丰富的 Tab 效果，共有 5 类移动端 Tab 样式：「默认」、「上菜单式」、「下菜单式」、「滑动式」、「联排式」。

打开决策报表，添加 Tab 块，点击「控件设置」>「tabpane0」>「移动端」>「样式模板」，可对 Tab 组件样式进行自定义设置 。如下图所示：

3.1 默认

「样式模板」选择「默认」，移动端预览效果如下图所示：

注：「样式模板」为默认时，若 Tab 块标题较长，可能会显示不全。

3.2 上菜单式

3.2.1 属性设置

「样式模板」选择「上菜单式」，Tab 样式为「自定义」，可设置选中背景，初始字符和选中字符的颜色等，如下图所示：

上菜单式「设置」项各属性值介绍如下表所示：

3.2.2 移动端效果

Tab 样式选择「标准」时，移动端预览效果如下图所示：

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

3.3 下菜单式

3.3.1 界面介绍

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

下菜单式「设置」项各属性值介绍如下表所示：

下菜单式支持自定义添加图标，「选中」要设置图标的 Tab 块位置，点击「编辑」，

用户可选择设计器自带的图标，或上传自定义图标图片。如下图所示：

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

3.3.2 移动端效果

Tab 样式选择为「标准」时，移动端预览效果如下图所示：

3.4 滑动式

3.4.1 界面介绍

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

滑动式「设置」项各属性值介绍如下表所示：

3.4.2 移动端效果

Tab 样式选择为「标准」时，移动端预览效果如下图所示：

注1：「滑动式」下，不支持 Tab 内图表块、报表块组件内部上下左右滑动，需要放大后触发组件内部滑动

注2：「滑动式」下，Tab 内部的图表组件不支持激活

3.5 联排式

3.5.1 界面介绍

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

联排式「设置」项各属性值介绍如下表所示：

3.5.2 移动端效果

Tab 样式选择为「标准」时，移动端预览效果如下图所示：

在使用多 Tab 时，单个 Tab 内容过多，下拉后无法快速切换 Tab标题。为了方便用户切换 Tab 页，移动端 Tab 标签面板支持冻结。

移动端属性选择「重布局」，「竖屏」显示模板时，上下滑动 Tab 页：

• Tab 样式为「上菜单式」、「默认样式」、「联排式」时，Tab 标签面板始终固定在「页面顶端」

• Tab 样式为「滑动式」时，无需显示Tab 标签面板即可切换标签页

• Tab 样式为「下菜单式」时，Tab 标签面板不会冻结