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

> YiDAのTabsLayoutコンポーネントの設定方法を解説。タブの形状・位置・デフォルト表示項目・切り替えイベントなどを設定し、サブタスクやビュー間のナビゲーションを実現する手順を紹介します。

TabsLayoutコンポーネントを使用すると、ユーザーはサブタスク、ビュー、モード間を切り替えられます。グローバルナビゲーションとして機能し、グローバル機能の表示と切り替えを行うための主要エリアとして利用されます。

## 使用シーン

* ページコンテンツを分類または分離したい場合。
* ページコントロールを集約し、ページスペースをより有効に活用したい場合。

## コンポーネント例

## コンポーネントプロパティ

| 属性               | 説明                                                   | タイプ                                                       | デフォルト         |
| ---------------- | ---------------------------------------------------- | --------------------------------------------------------- | ------------- |
| `contentPadding` | コンテンツエリアの内側余白を設定します。CSSのpadding値を入力してください。           | `string`                                                  | `'20px 20px'` |
| `excessMode`     | タブが多すぎる場合の表示モード。`slide`: スライド、`dropdown`: ドロップダウン選択。 | `'slide' \| 'dropdown'`                                   | `'slide'`     |
| `extraRender`    | ナビゲーションバーに追加コンテンツを表示します。                             | `() => ReactNode`                                         | -             |
| `items`          | デフォルトのアクティブ項目、無効項目、およびタブラベルを設定します。                   | [TabItem\[\]](/ja/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`               | -             |