Панель навигации
Панель навигации отображает информацию и действия, относящиеся к текущему экрану.
В верхней панели приложений отображается содержимое и действия, связанные с текущим экраном. Она используется для брендинга, заголовков экрана, навигации и действий.
Она может использоваться как контекстное меню или как навигационная панель.
Простая панель навигации
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<AppBar position="static">
<Toolbar variant="dense">
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit">
Photos
</Typography>
</Toolbar>
</AppBar>
Фиксированное положение
Когда вы рендерите навигационную панель с фиксированным положением, размер элемента не влияет на остальную часть страницы. Это может быть причиной того, что часть вашего содержимого может стать невидимой, скрываясь за навигационной панелью. Есть 3 варианта решения:
- Вы можете использовать
position="sticky"
вместо"fixed"
. ⚠️"sticky"
не поддерживается в IE 11. - Вы можете отрендерить второй
<Toolbar />
компонент:
function App() {
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar>{/* содержимое */}</Toolbar>
</AppBar>
<Toolbar />
</React.Fragment>
);
}
- Вы можете использовать
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]) => триггер
Аргументы
варианты
(объекта [optional]):
options.disableHysteresis
(Boolean [optional]): По умолчанию -false
. Отключение запаздывания. Игнорирование направления прокрутки когда определеноtrigger
значение.options.target
(Node [optional]): По умолчаниюwindow
.options.threshold
(Number [optional]): По умолчанию100
. Измените значениеtrigger
когда вертикальная прокрутка строго первышает этот порог (исключительно).
Возвращает
trigger
: Соответствует ли положение прокрутки критерию?
Примеры
<div>