Перейти к контенту
Редактировать эту страницу

Панель навигации

Панель навигации отображает информацию и действия, относящиеся к текущему экрану.

В верхней панели приложений отображается содержимое и действия, связанные с текущим экраном. Она используется для брендинга, заголовков экрана, навигации и действий.

Она может использоваться как контекстное меню или как навигационная панель.

Простая панель навигации

News

Панель навигации с основным полем поиска

Основная панель поиска.

Material-UI

Панель навигации с меню

Photos

Панель навигации с полем для поиска

Боковая панель поиска.

Material-UI

Dense (Только для компьютеров)

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>

Выступающая

Выступающая панель навигации.

Material-UI

Нижняя панели навигации

Фиксированное положение

Когда вы рендерите навигационную панель с фиксированным положением, размер элемента не влияет на остальную часть страницы. Это может быть причиной того, что часть вашего содержимого может стать невидимой, скрываясь за навигационной панелью. Есть 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>{/* content */}</Toolbar>
      </AppBar>
      <Offset />
    </React.Fragment>
  );
}

Прокрутка

Вы можете использовать useScrollTrigger() хук, отвечающий за механизм прокрутки.

Скрыть панель навигации

Панель навигации прячется при прокрутке вниз, освобождая место для чтения.

Надвинуть панель навигации

Панель навигации наползает на содержимое при прокрутке, сообщая пользователю, что он находится не в начале страницы.

Вернуться в начало страницы

Плавающая кнопка появляется при прокрутке, позволяя легко вернуться в начало страницы.

useScrollTrigger ([options]) => триггер

Аргументы

  1. options (object [optional]):

    • options.disableHysteresis (bool [optional]): Defaults to false. Отключение запаздывания. Игнорирование направления прокрутки когда определено trigger значение.
    • options.target (Node [optional]): По умолчанию window.
    • options.threshold (number [optional]): По умолчанию 100. Измените значение trigger когда вертикальная прокрутка строго первышает этот порог (исключительно).

Возвращает

trigger: Соответствует ли положение прокрутки критерию?

Примеры

<div mark="crwd-mark">

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