DashboardLayoutAPI
React DashboardLayout 元件的 API 參考文件。瞭解此導出模組的 props、CSS 和其他 API。
示範
Import
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
// or
import { DashboardLayout } from '@toolpad/core';閱讀這份關於最小化 bundle 大小的指南，以瞭解差異。
原生元件的 Props 也可使用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children* | node | - | 儀表板的內容。 |
| branding | { homeUrl?: string, logo?: node, title?: string } | null | 儀表板的品牌選項。 |
| defaultSidebarCollapsed | bool | false | 側邊欄是否應在桌面尺寸螢幕中開始摺疊。 |
| disableCollapsibleSidebar | bool | false | 側邊欄是否不應在桌面和平板電腦視窗中摺疊為迷你變體。 |
| hideNavigation | bool | false | 是否應隱藏導覽列和選單圖示 |
| navigation | Array<{ action?: node, children?: Array<object | { kind: 'header', title: string } | { kind: 'divider' }>, icon?: node, kind?: 'page', pattern?: string, segment?: string, title?: string } | { kind: 'header', title: string } | { kind: 'divider' }> | [] | 儀表板的導覽定義。瞭解更多。 |
| sidebarExpandedWidth | number | string | 320 | 展開時側邊欄的寬度。 |
| slotProps | { appTitle?: { branding?: { homeUrl?: string, logo?: node, title?: string } }, sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: object, slotProps?: { popover?: object, popoverContent?: object, preview?: object, signInButton?: object, signOutButton?: object }, slots?: { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object } | {} | 用於每個 slot 內部的 props。 |
| slots | { appTitle?: elementType, sidebarFooter?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType } | {} | 用於每個 slot 內部的元件。 請參閱下方的Slots API 以取得更多詳細資訊。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及其他 CSS 樣式的系統 prop。 請參閱 `sx` 頁面 以取得更多詳細資訊。 |
此元件無法持有 ref。
| Slot 名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| appTitle | Link | 用於版面配置標頭中的應用程式標題區段的元件。 | |
| toolbarActions | ToolbarActions | 用於版面配置標頭中的工具列動作元件。 | |
| toolbarAccount | 帳戶 | 用於版面配置標頭中的工具列帳戶元件。 | |
| sidebarFooter | null | 用於版面配置側邊欄中的選用頁尾元件。 |
原始碼
如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。