儀表板佈局

儀表板佈局組件為典型的儀表板頁面提供了一個可自訂的開箱即用佈局。

DashboardLayout 組件是一種快速簡便的方式，可為任何儀表板頁面提供具有標頭和側邊欄的標準全螢幕佈局，以及可立即使用且易於自訂的導航和品牌。

此組件的許多功能都可以通過 AppProvider 組件進行配置，該組件必須將其包裹起來以提供必要的上下文。

範例

DashboardLayout 引入了帶有導航的標頭和側邊欄，以及用於頁面內容的可滾動區域。

如果為淺色和深色模式都定義了應用程式主題，則標頭中的主題切換器允許輕鬆地在兩種模式之間切換。

<AppProvider
  navigation={NAVIGATION}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={NAVIGATION}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

品牌

DashboardLayout 的某些元素可以配置為與您的個人化品牌相匹配。

這可以通過 AppProvider 中的 branding 屬性來完成，該屬性允許設置自訂的 logo 圖像、頁面標頭中的自訂 title 文本以及點擊品牌組件時導向的自訂 homeUrl。

<AppProvider
  navigation={NAVIGATION}
  branding={{
    logo: <img src="https://mui.dev.org.tw/static/logo.png" alt="MUI logo" />,
    title: 'MUI',
    homeUrl: '/toolpad/core/introduction',
  }}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={NAVIGATION}
  branding={{
    logo: <img src="https://mui.dev.org.tw/static/logo.png" alt="MUI logo" />,
    title: 'MUI',
    homeUrl: '/toolpad/core/introduction',
  }}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

AppProvider 中的 navigation 屬性允許通過在任何順序中包含不同的導航元素作為構建模塊，在 DashboardLayout 側邊欄中設置任何類型的導航結構。

組合和排序這些不同元素的靈活性允許各種各樣的導航結構來適應您的用例。

導航連結可以放置在側邊欄中，格式如下

{ segment: 'home', title: 'Home', icon: <DescriptionIcon /> }

<AppProvider
  navigation={[
    {
      segment: 'home',
      title: 'Home',
      icon: <DescriptionIcon />,
    },
    {
      segment: 'about',
      title: 'About Us',
      icon: <DescriptionIcon />,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={[
    {
      segment: 'home',
      title: 'Home',
      icon: <DescriptionIcon />,
    },
    {
      segment: 'about',
      title: 'About Us',
      icon: <DescriptionIcon />,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

導航標題可以放置在側邊欄中，格式如下

{ kind: 'header', title: 'Animals' }

<AppProvider
  navigation={[
    {
      kind: 'header',
      title: 'Animals',
    },
    {
      segment: 'lion',
      title: 'Lion',
      icon: <DescriptionIcon />,
    },
    {
      kind: 'header',
      title: 'Movies',
    },
    {
      segment: 'lord-of-the-rings',
      title: 'Lord of the Rings',
      icon: <DescriptionIcon />,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={[
    {
      kind: 'header',
      title: 'Animals',
    },
    {
      segment: 'lion',
      title: 'Lion',
      icon: <DescriptionIcon />,
    },
    {
      kind: 'header',
      title: 'Movies',
    },
    {
      segment: 'lord-of-the-rings',
      title: 'Lord of the Rings',
      icon: <DescriptionIcon />,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

分隔線可以放置在側邊欄中的項目之間，格式如下

{
  kind: 'divider';
}

<AppProvider
  navigation={[
    {
      segment: 'star-wars',
      title: 'Star Wars',
      icon: <DescriptionIcon />,
    },
    { kind: 'divider' },
    {
      segment: 'eagle',
      title: 'Eagle',
      icon: <DescriptionIcon />,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={[
    {
      segment: 'star-wars',
      title: 'Star Wars',
      icon: <DescriptionIcon />,
    },
    { kind: 'divider' },
    {
      segment: 'eagle',
      title: 'Eagle',
      icon: <DescriptionIcon />,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

巢狀導航結構可以放置在側邊欄中，格式如下

{ title: 'Movies', icon: <FolderIcon />, children: [ ... ] }

<AppProvider
  navigation={[
    {
      segment: 'movies',
      title: 'Movies',
      icon: <FolderIcon />,
      children: [
        {
          segment: 'lord-of-the-rings',
          title: 'Lord of the Rings',
          icon: <DescriptionIcon />,
        },
        {
          segment: 'harry-potter',
          title: 'Harry Potter',
          icon: <DescriptionIcon />,
        },
      ],
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={[
    {
      segment: 'movies',
      title: 'Movies',
      icon: <FolderIcon />,
      children: [
        {
          segment: 'lord-of-the-rings',
          title: 'Lord of the Rings',
          icon: <DescriptionIcon />,
        },
        {
          segment: 'harry-potter',
          title: 'Harry Potter',
          icon: <DescriptionIcon />,
        },
      ],
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

導航連結具有一個可選的 action 屬性，用於在相應列表項的右側呈現任何內容，例如帶有數字的徽章，或用於切換彈出菜單的按鈕。

<AppProvider
  navigation={[
    {
      segment: 'contacts',
      title: 'Contacts',
      icon: <PersonIcon />,
      action: <Chip label={7} color="primary" size="small" />,
    },
    {
      segment: 'calls',
      title: 'Calls',
      icon: <CallIcon />,
      action: popoverMenuAction,
      children: CALLS_NAVIGATION,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={[
    {
      segment: 'contacts',
      title: 'Contacts',
      icon: <PersonIcon />,
      action: <Chip label={7} color="primary" size="small" />,
    },
    {
      segment: 'calls',
      title: 'Calls',
      icon: <CallIcon />,
      action: popoverMenuAction,
      children: CALLS_NAVIGATION,
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

導航連結具有一個可選的 pattern 屬性，用於定義要匹配的模式，以便將項目標記為選中。此功能構建於 path-to-regexp 庫之上。一些例子

常數路徑：orders
動態段：orders/:segment
可選段：orders{/:segment}?
一個或多個段：orders{/:segment}+
零個或多個段：orders{/:segment}*

<AppProvider
  navigation={[
    {
      segment: 'dashboard',
      title: 'Dashboard',
      icon: <DashboardIcon />,
    },
    {
      segment: 'orders',
      title: 'Orders',
      icon: <ShoppingCartIcon />,
      pattern: 'orders{/:orderId}*',
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} navigate={router.navigate} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  navigation={[
    {
      segment: 'dashboard',
      title: 'Dashboard',
      icon: <DashboardIcon />,
    },
    {
      segment: 'orders',
      title: 'Orders',
      icon: <ShoppingCartIcon />,
      pattern: 'orders{/:orderId}*',
    },
  ]}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} navigate={router.navigate} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

佈局側邊欄在桌面和平板電腦視口中可折疊為迷你抽屜（僅帶圖標）。可以使用 disableCollapsibleSidebar 屬性禁用此行為。

<DashboardLayout disableCollapsibleSidebar>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

<DashboardLayout disableCollapsibleSidebar>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

按下 Enter 開始編輯

在桌面上以迷你抽屜啟動

佈局側邊欄可以使用 defaultSidebarCollapsed 屬性，在桌面視口尺寸上默認為折疊的迷你抽屜。

<DashboardLayout defaultSidebarCollapsed>
  <DemoPageContent pathname={pathname} />
</DashboardLayout>

<DashboardLayout defaultSidebarCollapsed>
  <DemoPageContent pathname={pathname} />
</DashboardLayout>

按下 Enter 開始編輯

如果需要，可以使用 hideNavigation 屬性隱藏佈局側邊欄。

<DashboardLayout hideNavigation>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

<DashboardLayout hideNavigation>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

按下 Enter 開始編輯

全尺寸內容

佈局內容可以使用諸如 flex: 1 或 height: 100% 之類的樣式佔用所有可用區域。

<DashboardLayout>
  <iframe
    title="Google Map"
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
    style={{ flex: 1, border: 0 }}
    allowFullScreen
    loading="lazy"
  />
</DashboardLayout>

<DashboardLayout>
  <iframe
    title="Google Map"
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2799181496!2d-74.25987571760744!3d40.69767006358627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259af18b60165%3A0x8b621f8a7a7d28a4!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1633452834502!5m2!1sen!2s"
    style={{ flex: 1, border: 0 }}
    allowFullScreen
    loading="lazy"
  />
</DashboardLayout>

按下 Enter 開始編輯

帳戶

DashboardLayout 與 <Account /> 組件集成在一起。當用戶登錄時（存在 session 物件），它呈現為帳戶管理菜單；當未登錄時，則呈現為按鈕。

<AppProvider
  session={session}
  authentication={authentication}
  navigation={NAVIGATION}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

<AppProvider
  session={session}
  authentication={authentication}
  navigation={NAVIGATION}
  router={router}
  theme={demoTheme}
  window={demoWindow}
>
  <DashboardLayout>
    <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
</AppProvider>

按下 Enter 開始編輯

自訂

插槽

佈局的某些區域可以使用 slots 和 slotProps 屬性替換為自訂組件。一些可能有用的插槽

appTitle：允許您自訂佈局標頭中的應用程式標題部分。
toolbarActions：允許您向標頭中的工具欄添加新項目，例如搜索欄或按鈕。如果您希望這樣做，可以導入並使用默認的 ThemeSwitcher 組件，如下例所示。
sidebarFooter：允許您在側邊欄中添加頁腳內容。

<DashboardLayout
  slots={{
    appTitle: CustomAppTitle,
    toolbarActions: ToolbarActionsSearch,
    sidebarFooter: SidebarFooter,
  }}
>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

<DashboardLayout
  slots={{
    appTitle: CustomAppTitle,
    toolbarActions: ToolbarActionsSearch,
    sidebarFooter: SidebarFooter,
  }}
>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

按下 Enter 開始編輯

範例

佈局側邊欄中的用戶帳戶

<DashboardLayout
  slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
>
  <DemoPageContent pathname={pathname} />
</DashboardLayout>

<DashboardLayout
  slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
>
  <DemoPageContent pathname={pathname} />
</DashboardLayout>

按下 Enter 開始編輯

帶有自訂主題切換器的設置菜單

可以使用 useColorScheme hook 來創建自訂主題切換器。

<DashboardLayout
  slots={{
    toolbarActions: CustomThemeSwitcher,
  }}
>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

<DashboardLayout
  slots={{
    toolbarActions: CustomThemeSwitcher,
  }}
>
  <DemoPageContent pathname={router.pathname} />
</DashboardLayout>

按下 Enter 開始編輯

API

請參閱下面的文檔，以獲取此處提及的組件的所有可用屬性和類別的完整參考。

儀表板佈局

範例

品牌

導航

導航連結

導航標題

導航分隔線

巢狀導航

導航操作

導航模式匹配

禁用可折疊側邊欄

在桌面上以迷你抽屜啟動

隱藏導航

全尺寸內容

帳戶

自訂

插槽

範例

佈局側邊欄中的用戶帳戶

帶有自訂主題切換器的設置菜單

API