标签页列表API

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

演示

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

标签页

导入

import TabList from '@mui/lab/TabList';
// or
import { TabList } from '@mui/lab';

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

Props

Tabs 组件的 Props 也可用。

名称	类型	描述
children	node	`<Tab />` 元素的列表。

ref 被转发到根元素。

继承

虽然上面没有明确文档说明，但 Tabs 组件的 props 在 TabList 中也可用。您可以利用这一点来定位嵌套组件。

CSS 类

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

类名	规则名	描述
.MuiTabList-centered	centered	如果 `centered={true}` & `!variant="scrollable"`，则样式应用于 flex 容器元素。
.MuiTabList-fixed	fixed	如果 `!variant="scrollable"`，则样式应用于 tablist 元素。
.MuiTabList-flexContainer	flexContainer	已弃用－请改用 `list`。有关更多详细信息，请参阅从已弃用的 API 迁移。
.MuiTabList-flexContainerVertical	flexContainerVertical	已弃用－请改用 `list` 和 `vertical` 的组合。有关更多详细信息，请参阅从已弃用的 API 迁移。
.MuiTabList-hideScrollbar	hideScrollbar	如果 `variant="scrollable"` 且 `visibleScrollbar={false}`，则样式应用于 tablist 元素。
.MuiTabList-indicator	indicator	样式应用于 TabIndicator 组件。
.MuiTabList-list	list	样式应用于 list 元素。
.MuiTabList-root	root	样式应用于根元素。
.MuiTabList-scrollableX	scrollableX	如果 `variant="scrollable"` 且 `orientation="horizontal"`，则样式应用于 tablist 元素。
.MuiTabList-scrollableY	scrollableY	如果 `variant="scrollable"` 且 `orientation="vertical"`，则样式应用于 tablist 元素。
.MuiTabList-scrollButtons	scrollButtons	样式应用于 ScrollButtonComponent 组件。
.MuiTabList-scrollButtonsHideMobile	scrollButtonsHideMobile	如果 `allowScrollButtonsMobile={true}`，则样式应用于 ScrollButtonComponent 组件。
.MuiTabList-scroller	scroller	样式应用于 tablist 元素。
.MuiTabList-vertical	vertical	如果 `orientation="vertical"`，则样式应用于根元素。

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

使用全局类名。
使用规则名作为自定义主题中组件的 styleOverrides 属性的一部分。

源代码

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