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

> Dokumentasi komponen TabsLayout di YiDA. Pelajari konfigurasi tab, item aktif default, dan event pergantian untuk navigasi antara sub-tugas dan tampilan halaman.

Komponen TabsLayout memungkinkan pengguna beralih antara sub-tugas, tampilan, atau mode yang berbeda. Komponen ini berfungsi sebagai navigasi global sekaligus area utama untuk menampilkan dan mengganti fitur global.

## Kapan digunakan

* Saat Anda perlu mengelompokkan atau memisahkan konten halaman.
* Saat Anda perlu memadatkan kontrol halaman agar ruang halaman dimanfaatkan lebih optimal.

## Contoh komponen

## Properti komponen

| Atribut          | Deskripsi                                                                                   | Tipe                                                      | Default       |
| ---------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------- |
| `contentPadding` | Mengatur padding dalam pada area konten. Masukkan nilai padding CSS.                        | `string`                                                  | `'20px 20px'` |
| `excessMode`     | Mode tampilan saat jumlah tab terlalu banyak. `slide`: geser; `dropdown`: pilihan dropdown. | `'slide' \| 'dropdown'`                                   | `'slide'`     |
| `extraRender`    | Merender konten tambahan pada batang navigasi.                                              | `() => ReactNode`                                         | -             |
| `items`          | Mengatur item aktif default, item yang dinonaktifkan, dan label tab.                        | [TabItem\[\]](/id/open/yida/components/interface#tabitem) | -             |
| `needBadge`      | Mengaktifkan badge.                                                                         | `boolean`                                                 | `false`       |
| `onTabChange`    | Peristiwa pergantian tab.                                                                   | `(activeIndex: number, key: string) => void`              | -             |
| `renderBadge`    | Merender badge.                                                                             | `(tabItem: object) => ReactNode`                          | -             |
| `shape`          | Mengatur bentuk tab.                                                                        | `'pure' \| 'wrapped' \| 'text' \| 'capsule'`              | `'pure'`      |
| `size`           | Ukuran item tab.                                                                            | `'small' \| 'medium'`                                     | `'medium'`    |
| `tabPosition`    | Posisi tab navigasi.                                                                        | `'top' \| 'bottom' \| 'left' \| 'right'`                  | `'top'`       |
| `tabRender`      | Perender tab kustom.                                                                        | `(key: string, props: object) => ReactNode`               | -             |