适用场景：安装了「数据门户」插件的用户，可参考本文了解数据门户的相关功能。

1.1 版本

1.2 应用场景

• 用户希望将相同主题的组件以 Tab 形式组合，点击不同的 Tab 页，查看不同主题的内容，提升数据门户的空间利用率。

• 用户在使用 数据看板 组件时，需要将数据分多个维度去展示，并且可以切换查看不同维度的数据。

1.3 功能简介

• 用户可以在一个 Tab 组件的不同 tab 页内添加多个组件，点击不同 Tab 页标题进行切换查看。
  

• Tab 组件支持新增 Tab 页、编辑 Tab 页标题、调整 Tab 页顺序、自身样式设置等。

注：不支持在 Tab 页内添加 Tab 组件。

本文介绍如何在数据门户看板中使用「Tab组件」，并将以下效果图作为示例进行说明。

管理员登录数据决策系统，点击「管理系统>数据门户>门户管理」，点击「新建门户」，新建一张数据门户看板，如下图所示：

在数据门户编辑界面，选择「其他」，点击/拖动「Tab组件」到数据门户中，如下图所示：

新添加的 Tab 组件中默认存在一个空白 Tab 页。

点击 Tab 页标题右侧的「+」再添加 2 个 Tab 页，新增的 Tab 页名称默认为「tab」，如下图所示：

• 支持添加的组件范围：常用内容、快捷入口、公告栏、报表动态、我的消息、数据看板、文本组件、图片组件、Web组件 。

• 添加的组件作用生效范围： Tab 组件并不改变原有组件的设置及生效作用范围。

点击第一个 Tab 页，切换到需要添加组件的 Tab 页。在数据门户编辑界面，拖动「公告栏」组件和「我的消息」组件到第一个 Tab 页内，如下图所示：

注：在 Tab 标签未重命名时，仅按照第一个拖入组件的名字进行变化。例如，上图中将组件首先拖入 Tab 页后，Tab 页名称自动修改为组件名称「公告栏」。若此时继续拖入组件则不影响当前 Tab 页标签名称。

同理，向第二个 Tab 页内拖入「常用内容」组件。并选中「常用内容」组件，在右侧组件内容中选择「我常看的」来源，如下图所示：

同理，向第三个 Tab 页中拖入「常用内容」组件。并选中「常用内容」组件，在右侧组件内容中选择「我的收藏」来源，如下图所示：

鼠标悬浮需要修改的 Tab 页标题，出现展开按钮，点击「编辑标题」，即可重命名 Tab 页的标题，如下图所示：

选中 Tab 组件，右侧可设置组件样式，包括：通用设置（Tab 组件样式）和 Tab 设置（Tab 页样式）。

组件样式设置支持两种：跟随主题、自定义。

1）跟随主题

• Tab 组件样式完全跟随「门户主题」样式，仅支持设置组件标题显隐和标题文本内容。

• Tab 页样式完全跟随「门户主题」样式，仅支持设置风格和样式。

2）自定义

Tab 组件样式不跟随「门户主题」的切换而变化。组件样式包括组件标题、标题文本、标题样式、组件背景，详情请参见：数据门户样式 。

Tab 页样式不跟随「门户主题」的切换而变化，支持设置风格、位置、Tab 标题、默认态和选中态。

「风格」有三种样式：

• 风格1：标签背景色为下方线条。
  

• 风格2：选中标签背景色为色块，未选中为线条。

• 风格3：所有标签的背景色都为色块。

「默认态」即未选中的状态，支持设置未选中的状态下的 Tab 页字体和背景颜色。

「选中态」即选中的状态，支持设置选中的状态下的 Tab 页字体和背景颜色，如下图所示：

7.1 删除组件

 删除 Tab 页和 Tab 组件，则对应 Tab 页内的组件也将被删除，删除时会进行提示。

7.1.1 删除 Tab 组件

选中组件，出现删除按钮，点击「删除按钮」，当 Tab 组件内容不为空时，弹窗提示「Tab 内的组件也将被移除，是否确定删除？」，点击「确定」，Tab 页内组件也一同删除，如下图所示：

7.1.2 删除 Tab 页签

鼠标悬浮需要删除的 Tab 标签页，出现展开按钮，点击「删除」，当 Tab 页内容不为空时，弹窗提示「Tab 内的组件也将被移除，是否确定删除？」，点击「确定」后即可成功删除 Tab 页，如下图所示：

7.1.3 删除 Tab 页内组件

选中组件，出现删除按钮，点击即可删除该组件。如下图所示：

7.2 调整组件

7.2.1 调整 Tab 组件

鼠标悬浮组件，出现虚线框，拖动可调整组件大小和位置。如下图所示：

7.2.2 调整 Tab 页顺序

选中 Tab 标签页，左右拖拽调整 Tab 页顺序，如下图所示：

7.2.3 调整 Tab 页内组件

鼠标悬浮组件，出现虚线框，拖动可调整 Tab 页内组件大小和位置。如下图所示：