App Bar

App Bar 显示与当前屏幕相关的信息和操作。

顶部 App bar 提供与当前屏幕相关的内容和操作。它用于品牌宣传、屏幕标题、导航和操作。

它可以转换为上下文操作栏或用作导航栏。

基本 App bar

带有菜单的 App bar

带有响应式菜单的 App bar

带有搜索字段的 App bar

侧边搜索栏。

带有抽屉的响应式 App bar

带有主搜索字段的 App bar

主搜索栏。

紧凑型（仅限桌面端）

突出显示

突出的 app bar。

底部 App bar

固定位置

当您将 app bar 位置设置为 fixed 时，元素的尺寸不会影响页面的其余部分。这可能会导致您的部分内容在 app bar 后面不可见。以下是 3 种可能的解决方案

1. 您可以使用 position="sticky" 代替 fixed。
2. 您可以渲染第二个 <Toolbar /> 组件

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}

3. 您可以使用 theme.mixins.toolbar CSS

const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Offset />
    </React.Fragment>
  );
}

滚动

您可以使用 useScrollTrigger() 钩子来响应用户滚动操作。

隐藏 App bar

App bar 在向下滚动时隐藏，以留出更多阅读空间。

提升 App bar

App bar 在滚动时提升，以表明用户不在页面顶部。

返回顶部

浮动操作按钮在滚动时出现，以便轻松返回页面顶部。

useScrollTrigger([options]) => trigger

参数

1. options (object [可选])

   • options.disableHysteresis (bool [可选])：默认为 false。禁用滞后效应。在确定 trigger 值时忽略滚动方向。
   • options.target (Node [可选])：默认为 window。
   • options.threshold (number [可选])：默认为 100。当垂直滚动严格穿过此阈值（不包含）时，更改 trigger 值。

返回值

trigger：滚动位置是否符合条件？

示例

import useScrollTrigger from '@mui/material/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hello</div>
    </Slide>
  );
}

在深色模式下启用颜色

根据Material Design 指南，color 属性对深色模式下 app bar 的外观没有影响。您可以通过将 enableColorOnDark 属性设置为 true 来覆盖此行为。

实验性 API - Toolpad

Dashboard Layout

来自 @toolpad/core 的 DashboardLayout 组件是仪表板应用程序的起点。它负责应用程序布局、主题、导航等。此组件的示例用法

API

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

• <AppBar />
• <Menu />
• <Toolbar />