# 选项卡

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183669699720634384`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/导航类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 选项卡

## 一、功能背景及价值用途

在低代码平台开发过程中，选项卡组件是用户界面设计中常用的交互元素，用于在有限空间内组织和展示大量内容。可将不同类型或主题的内容（如文本，列表，图表，操作按钮等）分别放置在不同的标签项中，避免页面因内容过多而显得杂乱，提升用户查找和浏览信息的效率，优化用户体验。

## 二、功能概述

选项卡通过不同的标签项将相关内容分组，方便用户在有限空间内切换查看不同类别的信息；可将左侧组件（如文本，按钮，图片等）拖拽至对应标签项区域进行内容填充，实现多样的页面布局和功能组合；右侧属性栏可针对标签项进行个性化设置。效果如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329820983623698&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 三、使用说明

### 1、功能入口

设计器左侧“基础组件/基础类”分类下选中选项卡组件，在右侧配置面板操作相关配置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329825393000454&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、基础配置

#### 2.1、标签项内容展示

在右侧属性设置中，标签项支持新增、编辑、删除、设置多语言、支持设置图标、排序、数据集、显示/隐藏、条件控制、复制、默认选中。每个标签项为1个页签

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329825482014733&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

新增：可新增标签项，丰富选项卡内容分类。

删除：可删除不需要的标签项。

多语言：支持对标签项多语言设置。

图标：可设置标签项图标，增强可视化区分。

排序：能对标签项进行排序，调整展示顺序。

数据集：能为标签项设置数据集，设计器显示字段名，预览显示具体值。如下图

   ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329825488306187&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

显示/隐藏：可手动隐藏特定标签项，使其不显示。如下图

  ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329829651152901&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

条件控制：通过设置控制条件（可增加、删除、编辑条件），结合控制事件（选中、显示、隐藏），决定页面载入时标签项默认选中、显示或隐藏状态。多个标签项条件相同时，以最后一个标签页设置生效。条件控制弹窗效果如下图：

    ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329829698560031&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

复制：支持复制标签项，包括选项卡设置复制、选项卡下组件及组件设置复制，便于快速创建相似内容结构。如下图

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329829813796893&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

默认选中：可设置标签项为默认选中（隐藏页签不可设为默认选中）；仅一个显示页签时，不允许隐藏。鼠标移入选中按钮时，提示：默认选中该标签项。

#### 2.2、标签项交互设置

支持对标签切换行为进行设置，可设置切换标签项时是否 “重新加载内容”；可设置设置鼠标移入选中标签项、记住上次选中标签项、单击选中标签刷新内容、仅一个标签项时默认隐藏标签项等交互逻辑。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329833979674631&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D) 

标签切换：重新加载内容（每次切换标签都请求接口加载内容）；不重新加载内容（切换标签时，第一次切换标签，正常请求接口加载内容，后续切换不请求接口）

鼠标移入时选中标签项：开启后，鼠标移动到标签项上时，自动选中该标签项，方便快速切换。

不启用时只有单击才视为选中标签项，启用时鼠标移入则视为选中标签项；

该功能仅针对pc端生效，移动端仍然为点击后选中标签项；

仅在“横向排列-顶部显示”、“纵向排列-居上显示”两种模式下支持。

记住上次选中的标签项：开启此功能，下次打开相关界面时，会自动选中上次离开时选中的标签项，延续用户操作习惯。

单击选中的标签刷新内容：开启后，单击已选中的标签项，会刷新其内容，可用于获取最新信息或重置内容状态。

仅一个标签项时默认隐藏标签栏：当选项卡中只有一个标签项时，可设置其默认隐藏标签栏，优化界面展示。

#### 2.3、标签项内容区

可在tab页内添加内容：可直接将需要的组件拖入对应标签项的内容区域如下图；目前选项卡组件已支持在同个标签项内添加多个组件。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329833993527318&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、样式配置

#### 3.1、自定义样式设置

选项卡：组件-自定义组件样式、如下图所示，选项卡组件支持设置标签项为横向排列/纵向排列/顶部下拉的不同显示模式；

1、当模式为横向排列时，支持设置为顶部横向排列或底部横向排列；并支持选项分布在组件的居左位置/居中位置/居右位置/水平铺满分布；

2、当模式为纵向排列时，支持设置为左侧纵向排列或右侧纵向排列；并支持选项分布在组件的居上位置/居中位置/居下位置/垂直铺满分布；

3、当模式为顶部下拉时，支持设置显示在顶部左侧或顶部右侧。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329833993527338&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

选项过多时显示：当展示模式为横向排列时，若标签项数量较多，超出了组件可视区域，此功能可设置以何种效果显示完整；支持设置为左右切换、自动换行并默认展开全部、自动换行并默认收起超出的标签项、下拉列表4种效果；

针对选项卡可进行：显示宽度、文字默认样式和选中样式设置；

针对内容区域进行：背景、内边距设置；

针对容器区域：容器高度等进行样式调整，实现个性化外观设计。

#### 3.2、选择组件样式

系统已配置好多种选项卡样式，用户可根据需求选择对应的样式，减少操作成本。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329838383693834&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、上下游关联功能点

1、数据集，具体使用方法，请参考：

[ _https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478_](https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478)

2、组件标题和底部使用方法，请参考：

[ _https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250_](https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250)

3、事件动作使用方法，请参考：

[ _https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693_](https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693)
