标签页 Tabs

Tabs 组件用于组织和展示不同类别的内容，允许用户在不同的视图之间进行切换。

基础用法

Tabs 组件由四个部分组成：

• Tabs: 容器组件
• TabList: 标签列表容器
• Tab: 单个标签项
• TabPanel: 标签对应的内容面板

胶囊模式

通过设置 capsule 属性，可以启用胶囊样式的标签页，这种样式更加紧凑且具有视觉焦点。

带额外操作

可以通过 extra 属性在标签栏右侧添加额外的操作元素。

禁用状态

通过给 Tab 组件设置 disabled 属性来禁用某个标签。

使用场景

用户资料页

Tabs 组件常用于用户资料页，用来组织不同类型的信息。

筛选标签

在数据列表页面中，Tabs 组件也可以作为筛选条件使用。

暗色模式

Tabs 组件支持暗色模式，在暗色主题下会自动应用合适的样式。

API

Tabs

参数名	描述	类型	默认值
defaultActiveKey	默认选中的 Tab key	string	''
capsule	是否为胶囊形	boolean	false
extra	右侧额外内容	ReactNode	-
children	子元素	ReactNode	-

TabList

参数名	描述	类型	默认值
extra	右侧额外内容（由 Tabs 传入）	ReactNode	-
children	子元素	ReactNode	-

Tab

参数名	描述	类型	默认值
tabKey	Tab 的唯一标识	string	-
disabled	是否禁用	boolean	false
children	子元素	ReactNode	-

TabPanel

参数名	描述	类型	默认值
tabKey	对应的 Tab key	string	-
children	子元素	ReactNode	-