PageContainerAPI

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

演示

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

import { PageContainer } from '@toolpad/core/PageContainer';
// or
import { PageContainer } from '@toolpad/core';

一个容器组件，为您的页面提供标题和面包屑导航。

原生组件的 Props 也可用。

名称	类型	描述
breadcrumbs	Array<{ path?: string, title: string }>	页面的面包屑导航。留空以使用活动页面的面包屑导航。
slotProps	{ header: { breadcrumbs?: Array<{ path?: string, title: string }>, slotProps?: { toolbar: object }, slots?: { toolbar?: elementType }, title?: string } }	用于每个内部插槽的 props。
slots	{ header?: elementType }	用于每个内部插槽的组件。有关更多详细信息，请参见下面的Slots API。
sx	Array<func \| object \| bool> \| func \| object	系统 prop，允许定义系统覆盖以及其他 CSS 样式。有关更多详细信息，请参见`sx` 页面。
title	string	页面的标题。留空以使用活动页面的标题。

该组件不能持有 ref。

插槽名称	类名	默认组件	描述
header		`PageHeader`	渲染页面标题的组件。

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

类名	规则名称	描述
.	disableGutters	如果 `disableGutters={true}`，则应用于根元素的样式。
.	fixed	如果 `fixed={true}`，则应用于根元素的样式。
.	maxWidthLg	如果 `maxWidth="lg"`，则应用于根元素的样式。
.	maxWidthMd	如果 `maxWidth="md"`，则应用于根元素的样式。
.	maxWidthSm	如果 `maxWidth="sm"`，则应用于根元素的样式。
.	maxWidthXl	如果 `maxWidth="xl"`，则应用于根元素的样式。
.	maxWidthXs	如果 `maxWidth="xs"`，则应用于根元素的样式。
.	root	应用于根元素的样式。

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

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