TabAPI

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

演示

有关此 React 组件的用法示例和详细信息，请访问组件演示页面

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

通过阅读这篇关于最小化包大小的指南，了解它们之间的区别。

ButtonBase 组件的属性也可用。

名称	类型	默认值	描述
children	unsupportedProp	-	不支持此属性。如果需要更改子元素结构，请使用 `component` 属性。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
disabled	bool	false	如果为 `true`，则禁用该组件。
disableFocusRipple	bool	false	如果为 `true`，则禁用键盘焦点涟漪效果。
disableRipple	bool	false	如果为 `true`，则禁用涟漪效果。 ⚠️ 如果没有涟漪效果，默认情况下不会为 :focus-visible 设置样式。请务必通过使用 `.Mui-focusVisible` 类应用单独的样式来突出显示元素。
icon	element \| string	-	要显示的图标。
iconPosition	'bottom' \| 'end' \| 'start' \| 'top'	'top'	图标相对于标签的位置。
label	node	-	标签元素。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
value	any	-	您可以提供自己的值。否则，我们将回退到子元素位置索引。
wrapped	bool	false	选项卡标签显示在单行中。如果需要，它们可以使用第二行。

ref 被转发到根元素。

虽然上面没有明确记录，但 ButtonBase 组件的属性在 Tab 中也可用。您可以利用它来定位嵌套组件。

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

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled={true}`（由 Tabs 组件控制），则应用于根元素的状态类。
.Mui-selected		如果 `selected={true}`（由 Tabs 组件控制），则应用于根元素的状态类。
.MuiTab-fullWidth	fullWidth	如果 `fullWidth={true}`（由 Tabs 组件控制），则应用于根元素的样式。
.MuiTab-icon	icon	如果同时提供了 `icon` 和 `label`，则应用于 `icon` HTML 元素的样式。
.MuiTab-iconWrapper	iconWrapper	如果同时提供了 `icon` 和 `label`，则应用于 `icon` HTML 元素的样式。已弃用－请改用 `icon` 类。有关更多详细信息，请参阅从已弃用的 API 迁移
.MuiTab-labelIcon	labelIcon	如果同时提供了 `icon` 和 `label`，则应用于根元素的样式。
.MuiTab-root	root	应用于根元素的样式。
.MuiTab-textColorInherit	textColorInherit	如果父级 `Tabs` 组件具有 `textColor="inherit"`，则应用于根元素的样式。
.MuiTab-textColorPrimary	textColorPrimary	如果父级 `Tabs` 组件具有 `textColor="primary"`，则应用于根元素的样式。
.MuiTab-textColorSecondary	textColorSecondary	如果父级 `Tabs` 组件具有 `textColor="secondary"`，则应用于根元素的样式。
.MuiTab-wrapped	wrapped	如果 `wrapped={true}`，则应用于根元素的样式。

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

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