> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 标签页

> 标签页组件主要用于在有限的空间内组织并展示多个相关但独立的数据视图或分析主题，通过页签切换实现内容分层，既能保持信息结构化，又能有效节省页面空间。

## 功能简介

标签页组件主要用于在**有限的空间内组织并展示多个相关但独立的数据视图或分析主题**，通过页签切换实现内容分层，既能保持信息结构化，又能有效节省页面空间。

**典型的适用场景包括**：

* **业务维度对比**：对同一核心指标（如销售额）按**不同维度**（如产品、地区、时间段）进行分析和横向比较。
* **多视图展示**：在同一看板中，为**不同业务部门**或用户角色（如管理层、运营部、市场部）定制专属的数据视图。
* **内容导航与组织**：在仪表盘应用或数字大屏中，通过标签页来区分复杂内容模块，例如“总览”、“趋势”、“明细”等，使用户能快速定位所需信息。

## 操作流程

### **添加标签页组件**

1. 进入AI表格应用模块。
2. 在左侧导航栏选择需要添加组件的目标页面。
3. 点击页面左下角的  **+ 添加组件** ，然后选择 **标签页** 。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/tabs-component/images/image_JKVk3_fhAM.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=0df065b01c673c051dff66d70b5ca9cd" alt="" width="754" height="94" data-path="zh/aitable/application-mode/tabs-component/images/image_JKVk3_fhAM.png" />

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/tabs-component/images/image_Y2vI2kfIdV.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=648484a245fc7b2f0fee0df3d0477615" alt="" width="2940" height="1494" data-path="zh/aitable/application-mode/tabs-component/images/image_Y2vI2kfIdV.png" />

### **基础配置**

在添加组件后，通过右侧面板的 **基础配置** 进行以下设置：

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/tabs-component/images/image_VhFS9kYPwJ.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=c69a91b2ba564fd3de61a07bd108c148" alt="" width="2940" height="1494" data-path="zh/aitable/application-mode/tabs-component/images/image_VhFS9kYPwJ.png" />

* **预设样式**
  * 支持设置标签页的展示样式，提供3种预设样式供选择。
* **标签管理**
  * **添加标签页：** 点击\*\*+ 添加标签页\*\* 可以新增标签页，最多可增加至20个标签页。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/xO03NH38rdRn13UM/zh/aitable/application-mode/tabs-component/images/thistle-harbor.gif?s=2e7fd67abf418106ac1086382cc7a3f3" alt="" width="2938" height="1492" data-path="zh/aitable/application-mode/tabs-component/images/thistle-harbor.gif" />

* **添加组件至标签页：** 可以通过2种方式实现，第一种类似组合布局的使用方式，支持直接拖拽组件至对应标签页；第二种可以在标签页处点击  ，选择添加组件，即可批量选择添加当前页面的组件至该标签页。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/xO03NH38rdRn13UM/zh/aitable/application-mode/tabs-component/images/onyx-willow.gif?s=861dbad1b78f3d48a17c7dde8ac37b21" alt="" width="2934" height="1492" data-path="zh/aitable/application-mode/tabs-component/images/onyx-willow.gif" />

<img src="https://mintcdn.com/dingtalk-8c0f98e2/xO03NH38rdRn13UM/zh/aitable/application-mode/tabs-component/images/ivory-onyx.gif?s=accbcb24512f848f84e18722d7b8d61b" alt="" width="2938" height="1492" data-path="zh/aitable/application-mode/tabs-component/images/ivory-onyx.gif" />

* **删除标签页：** 在标签页处点击  ，选择 **删除** ，即可删除对应标签页。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/tabs-component/images/image_f6gojVH0cl.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=d6bc627db4676481d824487c03f2d7df" alt="" width="2940" height="1494" data-path="zh/aitable/application-mode/tabs-component/images/image_f6gojVH0cl.png" />

* **重命名标签页：** 鼠标点击标签页名称，即可进行重命名，标签页名字不可为空。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/xO03NH38rdRn13UM/zh/aitable/application-mode/tabs-component/images/larch-walnut.gif?s=0986375e86f93daf0921a9d85c18a16a" alt="" width="2938" height="1494" data-path="zh/aitable/application-mode/tabs-component/images/larch-walnut.gif" />

* **调整标签页位置：** 上下拖拽标签页左侧的  ，即可调整多个标签页的顺序。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/xO03NH38rdRn13UM/zh/aitable/application-mode/tabs-component/images/amber-basil.gif?s=e4f11baefcb36c9a4c826b77de148137" alt="" width="2938" height="1488" data-path="zh/aitable/application-mode/tabs-component/images/amber-basil.gif" />

* **切换操作**
  * 支持设置标签页中标签的展示位置，提供3种样式供选择：巨左、居中和居右。

### **自定义配置**

在右侧面板 **自定义配置** 中，进一步调整组件的视觉与交互效果：

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/tabs-component/images/image_KHO08fFVTW.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=6d5bb645aeb251391c4ad58db7e06538" alt="" width="2940" height="1494" data-path="zh/aitable/application-mode/tabs-component/images/image_KHO08fFVTW.png" />

* **背景颜色：** 支持设置组件背景颜色。
* **边框颜色：** 下拉配色板选择边框颜色。
* **边框粗细：** 下拉选择边框粗细。
* **选中色：** 通过色板设置标签被选中时的展示颜色。
* **未选中色：** 通过色板设置标签未被选中时默认展示的颜色。

### **组件管理**

* **操作菜单**

  选中组件后，点击其右上角的  图标，将展开操作菜单，您可以在此进行以下操作：

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/tabs-component/images/image_MBwOXDxhC2.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=48cc0d6a992c8116db6c6bd8c1be9457" alt="" width="2940" height="1494" data-path="zh/aitable/application-mode/tabs-component/images/image_MBwOXDxhC2.png" />

* **配置**：快速打开该组件的属性配置面板。
* **复制**：在当前页面内复制一个相同的组件。
* **复制到**：将组件复制到本应用内的其他指定页面。
* **删除**：将组件从当前页面中移除。
* **调整大小与位置**

<img src="https://mintcdn.com/dingtalk-8c0f98e2/xO03NH38rdRn13UM/zh/aitable/application-mode/tabs-component/images/opal-stone.gif?s=8d6eb3892d8de4d991129e8145648374" alt="" width="2938" height="1500" data-path="zh/aitable/application-mode/tabs-component/images/opal-stone.gif" />

* **调整大小**：将鼠标悬停在组件右下边角，并拖动拖拽手柄，即可自由调整组件的宽度和高度。
* **移动位置**：将鼠标移至组件上方，浮现  图标，按住鼠标左键并拖动，可在页面内拖拽组件调整位置。

## 常见问题

#### 问：支持在标签页中再嵌套标签页 / 组合布局吗？

答：不支持。

#### 问：最多支持创建多少个标签？

答：20个。
