页面容器
一个包裹页面内容并提供标题、面包屑和页面操作的组件。
PageContainer 是仪表盘内容理想的包装器。它显示当前页面标题，并提供面包屑以导航回当前层级结构。它通过在底层使用 Material UI Container 组件使您的页面具有响应性。
就像 DashboardLayout 一样，PageContainer 使用在 AppProvider 中定义的导航结构来构建其面包屑和标题。
订单
标题和面包屑
面包屑是通过将当前路径名与 AppProvider 中定义的导航结构匹配而形成的。匹配段落的标题用作页面标题。您可以使用 title 属性覆盖页面标题。
例如，在以下导航结构下
<AppProvider
navigation={[
{
segment: 'home',
title: 'Home',
children: [
{
segment: 'orders',
title: 'Orders',
},
],
},
]}
>
...
</AppProvider>
当您访问路径 /home/orders 时，面包屑包含 ACME / 首页 / 订单，并且页面标题为 订单。
订单
动态路由
当您在动态路由上使用 PageContainer 时，您可能希望设置属于特定路径的标题和面包屑。您可以使用 PageContainer 的 title 和 breadcrumbs 属性来实现这一点
您可以使用 useActivePage Hook 来检索活动页面的标题和面包屑。这样您就可以扩展现有值。
import { useActivePage } from '@toolpad/core/useActivePage';
import { Breadcrumb } from '@toolpad/core/PageContainer';
// Pass the id from your router of choice
function useDynamicBreadcrumbs(id: string): Breadcrumb[] {
const activePage = useActivePage();
invariant(activePage, 'No navigation match');
const title = `Item ${id}`;
const path = `${activePage.path}/${id}`;
return [...activePage.breadcrumbs, { title, path }];
}
例如，在 Next.js App Router 下，您将能够按如下方式获取动态路由的面包屑
// ./src/app/example/[id]/page.tsx
'use client';
import { useParams } from 'next/navigation';
import { PageContainer } from '@toolpad/core/PageContainer';
import invariant from 'invariant';
import { useActivePage } from '@toolpad/core/useActivePage';
export default function Example() {
const params = useParams<{ id: string }>();
const activePage = useActivePage();
invariant(activePage, 'No navigation match');
const title = `Item ${params.id}`;
const path = `${activePage.path}/${params.id}`;
const breadcrumbs = [...activePage.breadcrumbs, { title, path }];
return (
<PageContainer title={title} breadcrumbs={breadcrumbs}>
...
</PageContainer>
);
}
响应性
Page Container 组件继承了 Material UI Container 组件的属性。您可以使用其 maxWidth 和 fixed 属性来控制页面的边界。将 maxWidth 设置为 false 以完全禁用容器，并使内容一直延伸到页面边缘。
独立页面标题
PageContainer 中包含的 PageHeader 组件可以单独导入和使用，如果您希望这样做以获得更大的自定义自由度。
订单
操作
您可以在右侧保留的区域中配置其他操作。为此，请为 PageContainer 组件提供自定义的 header 插槽，您可以在其中为 PageHeader 提供自定义的 toolbar 插槽。您可以包装 PageHeaderToolbar 组件以创建自定义工具栏组件，如下所示
天气
当前状态活动
24°C
5%
18公里/小时
全尺寸内容
容器内的内容可以占据所有剩余的可用区域，样式如 flex: 1 或 height: 100%。