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

# Tabs

> The tabs component organizes and displays multiple related but independent data views or analysis topics in a limited space — content layering via tab switching keeps information structured while saving page real estate.

## Overview

The tabs component organizes and displays **multiple related but independent data views or analysis topics in a limited space**. Content layering via tab switching keeps information structured while saving page real estate.

**Common use cases**:

* **Multi-dimensional comparison**: analyze and cross-compare a core metric (e.g., sales) across **different dimensions** (product, region, time period).
* **Multi-view display**: in one dashboard, customize dedicated views for **different business teams** or roles (executives, ops, marketing).
* **Content navigation and organization**: in dashboard apps or kiosks, separate complex modules with tabs — "Overview", "Trends", "Detail" — so users can locate info fast.

## Workflow

### **Add a tabs component**

1. Open the AI Table app module.
2. From the left nav, pick the page.
3. Click **+ Add component** at the bottom-left, then **Tabs**.

### **Basic config**

After adding, in the right panel **Basic config**:

* **Preset styles**
  * 3 preset styles for tab display.

* **Tab management**
  * **Add tab**: click **+ Add tab** — up to 20 tabs.

  * **Add components to a tab**: two ways. First, like the combo layout — drag a component into the tab. Second, click the icon on the tab and pick **Add component** to batch-select existing components on the page.

  * **Delete tab**: click the icon on the tab, pick **Delete**.

  * **Rename tab**: click the tab name to rename inline. Cannot be empty.

  * **Reorder tabs**: drag the handle on the left of a tab up/down.

* **Switch behavior**
  * Tab position: **left**, **center**, or **right**.

### **Custom config**

In the right panel **Custom config**, fine-tune visuals and interaction:

* **Background color**: component background.
* **Border color**: from swatch.
* **Border thickness**: from dropdown.
* **Selected color**: highlight color for the active tab.
* **Unselected color**: default color for inactive tabs.

### **Component management**

* **Action menu**

  Select the component, click the icon at the top-right:

  * **Configure**: open config panel.
  * **Duplicate**: copy on the same page.
  * **Copy to**: copy to another page in this app.
  * **Delete**: remove from the page.
* **Resize and move**

  * **Resize**: drag the bottom-right handle.
  * **Move**: hover, hold, drag.

## FAQ

#### Q: Can I nest tabs / combo layouts inside tabs?

A: No.

#### Q: Max number of tabs?

A: 20.