TabsLayout Tabs
Allows users to switch between different sub-tasks, views, and modes. It has global navigation functionality and is the main display and switching area for global functions.
When to use
- Use when you need to categorize or separate page content.
- When you need to compress page controls to improve page space utilization.
Component Example
Component Properties
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
contentPadding | Set content area padding, please enter CSS padding value | string | '20px 20px' |
excessMode | Scroll mode when there are too many tabs, slide: scroll, dropdown: dropdown selection | 'slide' | 'dropdown' | 'slide' |
extraRender | Render navigation bar additional content | () => ReactNode | - |
items | Can set default active option, disabled option and label name | - | |
needBadge | Enable badge | boolean | false |
onTabChange | Tab switch event | (activeIndex: number, key: string) => void | - |
renderBadge | Badge rendering | (tabItem: object) => ReactNode | - |
shape | Set tab shape | 'pure' | 'wrapped' | 'text' | 'capsule' | 'pure' |
size | Tab item size | 'small' | 'medium' | 'medium' |
tabPosition | Position of navigation tabs | 'top' | 'bottom' | 'left' | 'right' | 'top' |
tabRender | Custom tab rendering | (key: string, props: object) => ReactNode | - |