Tabs 选项卡切换组件
何时使用
提供 平级的区域将大块内容进行收纳和展现，保持界面整洁。
代码示例
基本用法
基本使用，默认选中第一个
带图标的选项
自定义图标
禁用
禁用某个标签
不同位置的标签
标签的位置
添加额外交互
添加额外交互
API
Tabs
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| activeKey | 当前激活 tab 面板的 key | string | - |
| items | 选项卡内容 | TabsItemsProps[] | - |
| tabBarExtraContent | 额外的图标或内容 | ReactNode | - |
| tabBarGutter | 选项卡之间的间距 | number | - |
| tabBarStyle | tabBar的样式 | CSSProperties | - |
| tabPosition | 选项卡的位置，可选值有 top bottom left right | string | top |
| onChange | 切换面板的回调 | (key: string) => void | - |
| onTabClick | 点击选项卡的回调 | (key: string) => void | - |
| onTabScroll | 滚动选项卡的回调 | (direction: string) => void | - |
TabsItemsProps
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 禁用 | boolean | false |
| key | 对应 activeKey | string | - |
| label | 选项卡头显示文字 | string | - |
| icon | 选项卡图标 | ReactNode | - |
| children | 选项卡内容 | ReactNode | - |