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

TabsAPI

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

演示

导入

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

通过阅读此关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
actionref-

当组件挂载时触发的回调。当您想要以编程方式触发操作时，这非常有用。它支持两个操作：updateIndicator() 和 updateScrollButtons()

allowScrollButtonsMobileboolfalse

如果为 true，则不会强制在移动设备上隐藏滚动按钮。默认情况下，滚动按钮在移动设备上是隐藏的，并且优先于 scrollButtons。

aria-labelstring-

Tabs 的标签字符串。

aria-labelledbystring-

一个 id 或以空格分隔的 id 列表，用于标记 Tabs。

centeredboolfalse

如果为 true，则选项卡居中。此 prop 适用于大型视图。

childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参见下方的 CSS 类 API。

componentelementType-

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

indicatorColor'primary'
| 'secondary'
| string		'primary'

确定指示器的颜色。

onChangefunc-

当值更改时触发的回调。

签名:function(event: React.SyntheticEvent, value: any) => void
  • event 回调的事件源。警告：这是一个通用事件，而不是 change 事件。
  • value 我们默认为子项的索引 (数字)
orientation'horizontal'
| 'vertical'		'horizontal'

组件方向（布局流方向）。

ScrollButtonComponentelementTypeTabScrollButton

用于渲染滚动按钮的组件。

scrollButtons'auto'
| false
| true		'auto'

确定当选项卡设置为滚动时滚动按钮的行为

  • auto 将仅在并非所有项目都可见时显示它们。
  • true 将始终显示它们。
  • false 将永远不显示它们。

默认情况下，滚动按钮在移动设备上是隐藏的。可以使用 allowScrollButtonsMobile 禁用此行为。

selectionFollowsFocusbool-

如果为 true，则选定的选项卡在获得焦点时更改。否则，它仅在激活时更改。

slotProps{ endScrollButtonIcon?: func
| object, indicator?: func
| object, list?: func
| object, root?: func
| object, scrollbar?: func
| object, scrollButtons?: func
| object, scroller?: func
| object, startScrollButtonIcon?: func
| object }		{}

用于内部每个 slot 的 props。

slots{ endScrollButtonIcon?: elementType, EndScrollButtonIcon?: elementType, indicator?: elementType, list?: elementType, root?: elementType, scrollbar?: elementType, scrollButtons?: elementType, scroller?: elementType, startScrollButtonIcon?: elementType, StartScrollButtonIcon?: elementType }{}

用于内部每个 slot 的组件。

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

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

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

TabIndicatorPropsobject{}

应用于选项卡指示器元素的 Props。

TabScrollButtonPropsobject{}

应用于 TabScrollButton 元素的 Props。

textColor'inherit'
| 'primary'
| 'secondary'		'primary'

确定 Tab 的颜色。

valueany-

当前选定的 Tab 的值。如果您不希望选择任何 Tab，则可以将此 prop 设置为 false。

variant'fullWidth'
| 'scrollable'
| 'standard'		'standard'

确定选项卡的附加显示行为

  • scrollable 将调用滚动属性，并允许选项卡栏水平滚动（或滑动）。
  • fullWidth 将使选项卡增长以使用所有可用空间，这应该用于小型视图，例如在移动设备上。
  • standard 将渲染默认状态。
visibleScrollbarboolfalse

如果为 true，则滚动条可见。当显示选项卡的长垂直列表时，这可能很有用。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiTabs 通过主题更改此组件的默认 props。

Slots

Slot 名称类名默认组件描述
root.MuiTabs-rootdiv用于 popper 的组件。
scroller.MuiTabs-scrollerdiv用于 scroller 的组件。
list.MuiTabs-listdiv用于 flex 容器的组件。
scrollbarScrollbarSize用于 scroller 的组件。
indicator.MuiTabs-indicatorspan用于选项卡指示器的组件。
scrollButtons.MuiTabs-scrollButtonsTabScrollButton用于滚动按钮的组件。
startScrollButtonIconKeyboardArrowLeft用于开始滚动按钮图标的组件。
endScrollButtonIconKeyboardArrowRight用于结束滚动按钮图标的组件。

CSS 类

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

类名规则名称描述
.MuiTabs-centeredcentered如果 centered={true} & !variant="scrollable"，则应用于 flex 容器元素的样式。
.MuiTabs-fixedfixed如果 !variant="scrollable"，则应用于 tablist 元素的样式。
.MuiTabs-flexContainerflexContainer
.MuiTabs-flexContainerVerticalflexContainerVertical
.MuiTabs-hideScrollbarhideScrollbar如果 variant="scrollable" 且 visibleScrollbar={false}，则应用于 tablist 元素的样式。
.MuiTabs-scrollableXscrollableX如果 variant="scrollable" 且 orientation="horizontal"，则应用于 tablist 元素的样式。
.MuiTabs-scrollableYscrollableY如果 variant="scrollable" 且 orientation="vertical"，则应用于 tablist 元素的样式。
.MuiTabs-scrollButtonsHideMobilescrollButtonsHideMobile如果 allowScrollButtonsMobile={true}，则应用于 ScrollButtonComponent 组件的样式。
.MuiTabs-verticalvertical如果 orientation="vertical"，则应用于根元素的样式。

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

源代码

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