> ## 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. 简介

常用的两种形态是普通型与胶囊型；主要是用于布局，可以与其他组件一起共用。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639970153439-7ed12266-e8d8-4494-aefb-a5a62dd3a8cf.png)
</Frame>

亮点：可以自行控制组件的大小，但无法移动选项卡组件的位置（靠左、居中、靠右）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639971642685-9e1f50cb-cde5-4349-a17b-eace0575ef4e.png)
</Frame>

## 2. 操作步骤

### 2.1 选择组件

选择组件并拖动到设计器中

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639979552489-338dfdac-397a-4d27-ab1b-6aac87f57f11.png)
</Frame>

添加组件

### 2.2 配置标签项

* 标签项 ：支持增加多个标签项，当过多时支持配置显示模式

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639982561698-331c9ab2-422f-4f3f-94e0-f9f44f7df426.png)
</Frame>

显示模式

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639982601360-8b6ce9ab-5482-4216-ba24-664b5147a74c.png)
</Frame>

添加标签项

* 形态 ：指的是几个标签项的展示形态，普通型、包裹型、文本型与胶囊型

* 大小 ：默认为中

* 内容边距 ：支持调整，默认为 20px 20px

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639982927683-28f24f84-1051-4c10-82ee-a57c012331c3.png)
</Frame>

标签项形态

### 2.3 高级

#### 2.3.1 启用磁贴

支持磁贴拖拽，方便快速对图表的宽高及位置进行即时设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642141469559-0cf46d44-7aae-4f56-a261-4e09c7aa80bb.png)
</Frame>

#### 2.3.2 懒加载

开启后标签项里内容到切换到对应的标签项的时候才会加载。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642153219668-46d90ba6-58f6-42ba-8e48-8f2e86d91ccb.png)
</Frame>

#### 2.3.3 切换销毁

开启切换销毁后，每切换一次标签页都会出现蓝色闪电标志加载符号并且重新加载一次数据，如图所示：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/gif/1642147755412-6711291a-2e6f-4e07-8306-8ee8af041cc5.gif)
</Frame>

#### 2.3.4 开启定位

当开启定位后选择某个标签项，浏览器 URL 会有这个标签项的后缀，若复制这个链接进去就默认切换到当前标签项。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642144390340-51f16544-ae40-4ffe-bf8e-4432d4959a32.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642144685991-967100ad-6612-441d-a495-ca98ef34a2e8.png)
</Frame>

#### 2.3.5 开启徽标

开启徽标后下方会出现徽标设置，需要写代码进行设置徽标

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1642144005167-2c7202b6-ba35-40a8-a32e-dd443c390d59.png)
</Frame>

### 2.4 配置样式

支持调整默认状态与其他样式

例如：调整 Margin 上边距与边框线的显示

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639985454710-a660fefe-c540-465c-b6f9-17bb824873aa.png)
</Frame>