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

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

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

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

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

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

News
<AppBar position="static">
  <Toolbar>
    <IconButton
      edge="start"
      className={classes.menuButton}
      color="inherit"
      aria-label="menu"
    >
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title} component="div">
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>

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

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

Material-UI

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

Photos

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

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

Material-UI

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

Photos
<AppBar position="static">
  <Toolbar variant="dense">
    <IconButton
      edge="start"
      className={classes.menuButton}
      color="inherit"
      aria-label="menu"
    >
      <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 useStyles = makeStyles(theme => ({
  offset: theme.mixins.toolbar,
}))

function App() {
  const classes = useStyles();
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* содержимое */}</Toolbar>
      </AppBar>
      <div className={classes.offset} />
    </React.Fragment>
  )
};

Прокрутка

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

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

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

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

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

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

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

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

Аргументы

  1. варианты (объекта [optional]):

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

Возвращает

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

Примеры

<div mark="crwd-mark">

API