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

# TabsLayout 选项卡

> TabsLayout 选项卡组件文档，介绍标签页配置、默认激活项与切换事件，实现子任务与视图间的切换导航。

让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用，是全局功能的主要展示和切换区域。

## 何时使用

* 当需要对页面内容进行分类或区隔时使用。
* 当需要对页面控件进行压缩，提升页面空间利用率时。

## 组件示例

<iframe src="https://www.aliwork.com/developer/tabs-layout-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性               | 说明                                 | 类型                                                        | 默认值           |
| ---------------- | ---------------------------------- | --------------------------------------------------------- | ------------- |
| `contentPadding` | 设定内容区的内间距，请输入 CSS padding 值        | `string`                                                  | `'20px 20px'` |
| `excessMode`     | 选项卡过多时的滑动模式，slide：滑动、dropdown：下拉选择 | `'slide' \| 'dropdown'`                                   | `'slide'`     |
| `extraRender`    | 渲染导航栏附加内容                          | `() => ReactNode`                                         | -             |
| `items`          | 可以设置默认激活选项、禁用选项和标签名                | [TabItem\[\]](/zh/open/yida/components/interface#tabitem) | -             |
| `needBadge`      | 开启徽标                               | `boolean`                                                 | `false`       |
| `onTabChange`    | 选项卡切换事件                            | `(activeIndex: number, key: string) => void`              | -             |
| `renderBadge`    | 徽标渲染                               | `(tabItem: object) => ReactNode`                          | -             |
| `shape`          | 设置选项卡形态                            | `'pure' \| 'wrapped' \| 'text' \| 'capsule'`              | `'pure'`      |
| `size`           | 标签项大小                              | `'small' \| 'medium'`                                     | `'medium'`    |
| `tabPosition`    | 导航选项卡的位置                           | `'top' \| 'bottom' \| 'left' \| 'right'`                  | `'top'`       |
| `tabRender`      | 自定义渲染选项卡                           | `(key: string, props: object) => ReactNode`               | -             |