頁面容器
一個元件，用於包裝頁面內容，並提供標題、麵包屑和頁面操作。
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% 等樣式佔據剩餘的全部可用區域。
API
請參閱下面的文件，以獲得此處提及的元件可用的所有 props 和 classes 的完整參考。