跳过到主要内容跳过到主要内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

TabAPI

React 标签页组件的 API 参考文档。了解此导出模块的属性、CSS 和其他 API。

演示

导入

import Tab from '@mui/joy/Tab';
// or
import { Tab } from '@mui/joy';

阅读本指南，了解有关最小化包大小的差异。

属性

也提供原生组件的属性。

名称类型默认描述
actionfunc
| { current?: { focusVisible: func } }		-

用于命令式操作的 ref。目前仅支持 focusVisible() 操作。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

组件的颜色。它支持对此组件有意义的主题颜色。

要了解如何添加自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以是用于 HTML 元素的字符串或组件。

disabledboolfalse

如果为 true，则禁用该组件。

disableIndicatorboolfalse

如果为 true，则伪元素指示器将被隐藏。

indicatorInsetboolfalse

如果为 true，则指示器将根据 Tabs 的方向保持在内边距内。

indicatorPlacement'bottom'
| 'left'
| 'right'
| 'top'		row ? 'bottom' : 'right'

选择 Tab 时指示器的位置。

onChangefunc-

当设置新值时调用的回调。

orientation'horizontal'
| 'vertical'		'horizontal'

内容方向流。

slotProps{ root?: func
| object }		{}

用于每个插槽内部的属性。

slots{ root?: elementType }{}

用于每个插槽内部的组件。

有关更多详细信息，请参阅下面的插槽 API。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统属性。

有关更多详细信息，请参阅 `sx` 页面。

valuenumber
| string		-

您可以提供自己的值。否则，它将回退到子位置索引。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'plain'

要使用的全局变体。

要了解如何添加自己的变体，请查看主题组件—扩展变体。

ref 被转发到根元素。

主题默认属性

您可以使用 JoyTab 通过主题更改此组件的默认属性。

插槽

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.MuiTab-root'button'渲染根的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。

类名规则名称描述
.Mui-disabled如果 disabled={true}，则应用于根元素的类名。
.Mui-focusVisible当根元素获得焦点时应用于根元素的类名。
.Mui-selected当根元素被选中时应用于根元素的类名。
.MuiTab-colorContextcolorContext当颜色反转被触发时应用于根元素的类名。
.MuiTab-colorDangercolorDanger如果 color="danger"，则应用于根元素的类名。
.MuiTab-colorNeutralcolorNeutral如果 color="neutral"，则应用于根元素的类名。
.MuiTab-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的类名。
.MuiTab-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的类名。
.MuiTab-colorWarningcolorWarning如果 color="warning"，则应用于根元素的类名。
.MuiTab-horizontalhorizontal如果 orientation="horizontal"，则应用于根元素的类名。
.MuiTab-variantOutlinedvariantOutlined如果 variant="outlined"，则应用于根元素的类名。
.MuiTab-variantPlainvariantPlain如果 variant="plain"，则应用于根元素的类名。
.MuiTab-variantSoftvariantSoft如果 variant="soft"，则应用于根元素的类名。
.MuiTab-variantSolidvariantSolid如果 variant="solid"，则应用于根元素的类名。
.MuiTab-verticalvertical如果 orientation="vertical"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。