TabsLayout 选项卡
让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用，是全局功能的主要展示和切换区域。
何时使用
- 当需要对页面内容进行分类或区隔时使用。
- 当需要对页面控件进行压缩，提升页面空间利用率时。
组件示例
组件属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
contentPadding | 设定内容区的内间距，请输入 CSS padding 值 | string | '20px 20px' |
excessMode | 选项卡过多时的滑动模式，slide：滑动、dropdown：下拉选择 | 'slide' | 'dropdown' | 'slide' |
extraRender | 渲染导航栏附加内容 | () => ReactNode | - |
items | 可以设置默认激活选项、禁用选项和标签名 | - | |
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 | - |