App Bar 应用栏

应用栏组件展示了与当前屏幕息息相关的信息和操作。

而顶部应用栏（App Bar）则提供与当前屏幕相关的内容和操作。 该组件常用于展示品牌、展示标题、提供导航和一些可操作的内容。

它既可以用作于转换为上下文相关的操作栏，又可以直接充当导航栏。

简单的应用栏

带一个主搜索输入框的应用栏

一个主要搜索栏。

带有菜单的应用栏

带有搜索输入框的应用栏

一个侧边搜索栏。

紧凑模式 (仅限桌面模式)

突出模式

一个突出的应用栏。

底部应用栏

固定的位置

当渲染一个固定位置的应用栏时，元素的尺寸不会影响页面的其余内容。 这可能导致部分内容会被挡在应用程序栏后面，而无法可见。 下面是3种可能的解决方案：

1. 使用 position =“ sticky” 代替 fixed。 ⚠️ sticky 不支持 IE11。
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>
  );
}

Scrolling 滚动

您可以使用 useScrollTrigger() 这个 hook 来相应用户触发的滚动操作。

隐藏应用栏

向下滚动会隐藏应用栏，这样一来会留有更多的空间进行阅读。

变高的应用栏

应用栏会在滚动时提升，以表明用户还未到页面的顶部。

回到顶部

在滚动的时候，会出现一个浮动操作按钮，这样以便于返回页面的顶部。

useScrollTrigger([options]) => trigger

参数

1. options (object [optional]):

   • options.disableHysteresis (bool [optional]): Defaults to false. 禁用迟滞的效果。 在决定 trigger 的值时会忽略在滚动的方向。
   • options.target (Node [optional])：默认值是 window。
   • options.threshold (number [optional])：默认值是 100。 严格来说，当垂直滚动超过（但不包括）此阈值时，请更改 trigger 的值。

返回结果

trigger: 此滚动的位置符合要求吗？

例子

import useScrollTrigger from '@material-ui/core/useScrollTrigger';

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

Enable Color on Dark

Following the Material Design guidelines, the color prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the enableColorOnDark prop to true.

// Specific element via prop
<AppBar enableColorOnDark />

// Affect all AppBars via theme
<ThemeProvider
  theme={createTheme({
    components: {
      MuiAppBar: {
        defaultProps: {
          enableColorOnDark: true,
        },
      },
    },
  })}
>
  <AppBar />
</ThemeProvider>

API

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