跳转到内容
编辑此页面

应用栏（App bar）

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

顶部应用栏提供与当前屏幕有关的内容和操作。 该组件常用于展示品牌、屏幕标题、导航和操作。

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

基础的应用栏

News

带有菜单的应用栏

Photos

带有响应式菜单的应用栏

LOGO
LOGO

带有搜索输入框的应用栏

一个侧边搜索栏。

MUI

带有抽屉的响应式应用栏

带有主搜索输入框的应用栏

一个主搜索栏。

MUI

紧凑模式（仅限桌面）

Photos
<AppBar position="static">
  <Toolbar variant="dense">
    <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" color="inherit" component="div">
      Photos
    </Typography>
  </Toolbar>
</AppBar>

突出

一个突出显示的应用栏。

MUI

底部应用栏

固定位置

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

  1. 使用 position =“ sticky” 代替 fixed。 ⚠️ sticky 不支持 IE11。
  2. 可以渲染第二个 <Toolbar /> 组件：
function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* 内容 */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}
  1. 也可以用 theme.mixins.toolbar 的 CSS：
const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

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

滚动

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

隐藏应用栏

向下滚动隐藏应用栏，从而为阅读提供更多空间。

提升应用栏

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

回到顶部

滚动时出现一个浮动操作按钮，以便返回页面的顶部。

useScrollTrigger([options]) => trigger

参数

  1. options (object [optional]):

    • options.disableHysteresis (bool [optional])：默认值是 false。 禁用迟滞的效果。 在决定 trigger 的值时会忽略在滚动的方向。
    • options.target (Node [optional])：默认值是 window。
    • options.threshold (number [optional])：默认值是 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属性对深色模式下的应用栏外观没有影响。 你可以通过将enableColorOnDark属性设置为true覆盖这一行为。

enableColorOnDark
default
<ThemeProvider theme={darkTheme}>
  <AppBar position="static" color="primary" enableColorOnDark>
    {appBarLabel('enableColorOnDark')}
  </AppBar>
  <AppBar position="static" color="primary">
    {appBarLabel('default')}
  </AppBar>
</ThemeProvider>

API