Tab块

1.1 版本

1.2 应用场景

• 模板维度、数据较多，又不希望模板页面过长时，可使用 Tab 块，手动切换维度，且可以展示每个维度的标题。

• 同一个页面有多个明细数据表，不希望每一个都平铺展示出来，可使用 Tab 块，根据实际需要展示数据。
  

1.3 功能简介

针对您想要分析的某组数据，可以从使用 Tab 设置多个 Tab，分别从多个维度来分析这组数据，查看时切换 Tab 即可，非常方便。

例如：想要分析某工厂的生产情况，可以从产品产量维度、生产线产量维度、库存维度来分析，如下图所示：

首先我们点击设计器左上角「新建决策报表」，新建一个空白模板。将 body 的布局方式改为「绝对布局」，将 Tab 块拖入 body 中。如下图所示：

添加 Tab 块后，在组件设置列表可以看到一个 Tab 块包含 3 个层级：

• tablayout ： Tab 块的整体

• tabpane ：容纳所有 Tab 页标题的面板

• Tab ：一个 Tab 页的设计区域，支持添加组件

选中 Tab 块后，点击组件右上角的编辑按钮，进入编辑状态，可进行添加、删除、移动 Tab 页等操作。

1）新增：点击 Tab 页标题面板右侧的  按钮可以新增 Tab 页，默认自动添加在最后面。

2）移动：使用鼠标右键单击需要移动的 Tab 页，弹出四个选项：移动到首位，往前移动，往后移动和移动到末尾。

3）删除：点击 Tab 标题右上角的 × 按钮，可删除 Tab 页，也可在组件设置列表中选中后直接删除。

3.1 Tab 块整体属性

选中 tablayout 即 Tab 块整体，可在下方属性面板设置其属性。如下图所示：

具体属性介绍如下表所示：

3.2 Tab 页标题面板

选中 tabpane 即 Tab 页标题面板。如下图所示：

3.2.1 PC 端

tabpane PC 端属性如下表所示：

属性		简介
组件名称		组件名称默认为 tabpane+数字后缀，从 0 依次累加，支持修改，但不支持为空或重复
坐标·尺寸		可通过修改数值或拖曳标题面板，调整 Tab 标题面板的高度，如下图所示： 注1：组件大小不可以超出 tablayout 的高度范围 注2：组件大小为 0 ，或拖动标题组件到上下线重合时，即可隐藏 Tab 标题
样式模板	默认
	卡片式
	锦旗
	书签式
	菜单式
	五边形
	梯形
显示位置		Tab 页标题面板的位置可选择：上、下、左、右
背景/字体		自定义 Tab 标题背景、Tab 标题字号、字体等
文本方向	横排
	纵排

3.2.2 移动端

tabpane 移动端属性如下图所示，具体设置请参见：［通用］Tab 组件多样化

3.3 Tab 页

处于编辑状态下的 Tab 页，标题默认灰色，如下图「标题0」，Tab 属性界面如下图所示：

具体设置如下表所示：