PageContainerAPI
React PageContainer 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
範例
匯入
import { PageContainer } from '@toolpad/core/PageContainer';
// or
import { PageContainer } from '@toolpad/core';閱讀這份關於最小化 bundle 大小的指南，以了解差異。
一個容器組件，為您的頁面提供標題和麵包屑導航。
也提供原生組件的 Props。
| 名稱 | 類型 | 描述 |
|---|---|---|
| 麵包屑導航 | Array<{ path?: string, title: string }> | 頁面的麵包屑導航。留空以使用活動頁面的麵包屑導航。 |
| slotProps | { header: { breadcrumbs?: Array<{ path?: string, title: string }>, slotProps?: { toolbar: object }, slots?: { toolbar?: elementType }, title?: string } } | 用於每個內部 slot 的 props。 |
| slots | { header?: elementType } | 用於每個內部 slot 的組件。 請參閱下方的 Slots API 以了解更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 請參閱 `sx` 頁面以了解更多詳細資訊。 |
| 標題 | string | 頁面的標題。留空以使用活動頁面的標題。 |
此組件無法持有 ref。
| Slot 名稱 | 類別名稱 | 預設組件 | 描述 |
|---|---|---|---|
| header | PageHeader | 渲染頁面標頭的組件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的 slots。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| . | disableGutters | 如果 disableGutters={true}，則樣式會應用於根元素。 |
| . | fixed | 如果 fixed={true}，則樣式會應用於根元素。 |
| . | maxWidthLg | 如果 maxWidth="lg"，則樣式會應用於根元素。 |
| . | maxWidthMd | 如果 maxWidth="md"，則樣式會應用於根元素。 |
| . | maxWidthSm | 如果 maxWidth="sm"，則樣式會應用於根元素。 |
| . | maxWidthXl | 如果 maxWidth="xl"，則樣式會應用於根元素。 |
| . | maxWidthXs | 如果 maxWidth="xs"，則樣式會應用於根元素。 |
| . | root | 應用於根元素的樣式。 |
您可以使用以下其中一種自訂選項覆寫組件的樣式
- 使用全域類別名稱。
- 在自訂主題中，使用規則名稱作為組件
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看組件的實作程式碼以了解更多詳細資訊。