TabsLayout - DingTalk Help Center

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[]	-
`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`	-