仪表盘布局

仪表盘布局组件为典型的仪表盘页面提供了一个可自定义的开箱即用的布局。

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 prop 完成，它允许设置自定义 logo 图片、页面头部中的自定义 title 文本，以及点击时品牌组件指向的自定义 homeUrl。

<AppProvider
  navigation={NAVIGATION}
  branding={{
    logo: <img src="https://mui.org.cn/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.org.cn/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 prop 允许通过以任何顺序包含不同的导航元素作为构建块，在 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 prop，用于在相应列表项的右侧呈现任何内容，例如带有数字的徽章，或用于切换弹出菜单的按钮。

<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 prop，用于定义要匹配的模式，以便将项目标记为已选中。此功能构建在 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 prop 禁用此行为。

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

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

按 Enter 开始编辑

在桌面上以迷你抽屉启动

布局侧边栏可以使用 defaultSidebarCollapsed prop 在桌面视口尺寸上默认为折叠的迷你抽屉。

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

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

按 Enter 开始编辑

如果需要，可以使用 hideNavigation prop 隐藏布局侧边栏。

<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 props 替换为自定义组件。一些可能有用的插槽

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

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和类的完整参考。

仪表盘布局

演示

品牌

导航

导航链接

导航标题

导航分隔符

嵌套导航

导航操作

导航模式匹配

禁用可折叠侧边栏

在桌面上以迷你抽屉启动

隐藏导航

全尺寸内容

账户

自定义

插槽

示例

布局侧边栏中的用户帐户

带有自定义主题切换器的设置菜单

API