Tabs

Tabs 是一种 UI 元素，用于组织和在相关内容组之间导航。

Tab API

导入

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

阅读这篇关于最小化捆绑包大小的指南，了解更多差异。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
action	func \| { current?: { focusVisible: func } }	-	用于命令式操作的 ref。目前仅支持 `focusVisible()` 操作。
disabled	bool	false	如果为 `true`，则组件被禁用。
onChange	func	-	当设置新值时调用的回调。
slotProps	{ root?: func \| object }	{}	用于 Tab 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 Tab 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
value	number \| string	-	您可以提供自己的值。否则，它将回退到子位置索引。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-Tab-root	`'button'`	渲染 root 的组件。

CSS 类

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

类名	描述
.base--disabled	如果 `disabled={true}`，则应用于 root `button` 元素的 State 类。
.base--selected	如果 `selected={true}`，则应用于 root `button` 元素的 State 类。

TabPanel API

导入

import { TabPanel } from '@mui/base/TabPanel';
// or
import { TabPanel } from '@mui/base';

阅读这篇关于最小化捆绑包大小的指南，了解更多差异。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
children	node	-	组件的内容。
slotProps	{ root?: func \| object }	{}	用于 TabPanel 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 TabPanel 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
value	number \| string	-	TabPanel 的值。当选择具有相应值的 Tab 时，将显示它。如果未提供，它将回退到面板的索引。建议显式提供它，因为需要在服务器上渲染 tab panel。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-TabPanel-root	`'div'`	渲染 root 的组件。

CSS 类

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

类名	描述
.base-TabPanel-hidden	如果 `hidden={true}`，则应用于 root `div` 元素的 State 类。

Tabs API

导入

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

阅读这篇关于最小化捆绑包大小的指南，了解更多差异。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
children	node	-	组件的内容。
defaultValue	number \| string	-	默认值。当组件不受控制时使用。
direction	'ltr' \| 'rtl'	'ltr'	文本的方向。
onChange	func	-	当设置新值时调用的回调。
orientation	'horizontal' \| 'vertical'	'horizontal'	组件方向（布局流方向）。
selectionFollowsFocus	bool	-	如果为 `true`，则选定的 tab 在 focus 时更改。否则，它仅在激活时更改。
slotProps	{ root?: func \| object }	{}	用于 Tabs 内部每个 slot 的 props。
slots	{ root?: elementType }	{}	用于 Tabs 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。
value	number \| string	-	当前选定 Tab 的值。如果您不希望选择任何 Tab，则可以将此 prop 设置为 `null`。

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-Tabs-root	`'div'`	渲染 root 的组件。

CSS 类

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

类名	描述
.base-Tabs-horizontal	如果 `orientation='horizontal'`，则应用于 root 元素的类名。
.base-Tabs-vertical	如果 `orientation='vertical'`，则应用于 root 元素的类名。

TabsList API

导入

import { TabsList } from '@mui/base/TabsList';
// or
import { TabsList } from '@mui/base';

阅读这篇关于最小化捆绑包大小的指南，了解更多差异。

Props

原生组件的 Props 也可用。

名称类型默认值描述

children

node

组件的内容。

slotProps

{ root?: func
| object }

{}

用于 TabsList 内部每个 slot 的 props。

slots

{ root?: elementType }

{}

用于 TabsList 内部每个 slot 的组件。可以是用于 HTML 元素的字符串或组件。

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

ref 被转发到根元素。

Slots

要了解如何自定义 slot，请查看 Overriding component structure 指南。

Slot 名称	类名	默认组件	描述
root	.base-TabsList-root	`'div'`	渲染 root 的组件。

CSS 类

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

类名	描述
.base-TabsList-horizontal	如果 `orientation='horizontal'`，则应用于 root 元素的类名。
.base-TabsList-vertical	如果 `orientation='vertical'`，则应用于 root 元素的类名。