TabsLayout - DingTalk Help Center

The TabsLayout component lets users switch between different sub-tasks, views, or modes. It acts as global navigation and serves as the primary area for displaying and switching between global features.

When to Use

When you need to categorize or separate page content.
When you need to condense page controls to make better use of page space.

Component Example

Component Properties

Attribute	Description	Type	Default
`contentPadding`	Sets the inner padding of the content area. Enter a CSS padding value.	`string`	`'20px 20px'`
`excessMode`	The sliding mode when there are too many tabs. `slide`: slide; `dropdown`: dropdown selection.	`'slide' \| 'dropdown'`	`'slide'`
`extraRender`	Renders additional content in the navigation bar.	`() => ReactNode`	-
`items`	Sets the default active item, disabled items, and tab labels.	TabItem[]	-
`needBadge`	Enables badges.	`boolean`	`false`
`onTabChange`	Tab switching event.	`(activeIndex: number, key: string) => void`	-
`renderBadge`	Renders the badge.	`(tabItem: object) => ReactNode`	-
`shape`	Sets the tab shape.	`'pure' \| 'wrapped' \| 'text' \| 'capsule'`	`'pure'`
`size`	Tab item size.	`'small' \| 'medium'`	`'medium'`
`tabPosition`	Position of the navigation tabs.	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
`tabRender`	Custom tab renderer.	`(key: string, props: object) => ReactNode`	-