AppBar и Toolbar

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

Основные свойства AppBar

  • position: определяет расположение панели. Возможные значения:

    • fixed — закрепляет AppBar в верхней части окна, при этом содержимое страницы может прокручиваться.
    • absolute — панель находится поверх контента, не влияет на поток элементов.
    • sticky — панель закрепляется при прокрутке до определённого места.
    • static — панель находится в потоке документа и прокручивается вместе с контентом.
    • relative — смещается относительно своего обычного положения.

  • color: задаёт цветовую схему AppBar. Стандартные варианты:

    • primary
    • secondary
    • default
    • transparent

  • elevation: определяет уровень тени под панелью. Значение задаётся числом от 0 до 24.

Пример базового AppBar:

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

<AppBar position="static" color="primary" elevation={4}>
  <Toolbar>
    <Typography variant="h6">
      Моя панель
    </Typography>
  </Toolbar>
</AppBar>

Toolbar и его роль

Toolbar — это контейнер для элементов управления внутри AppBar. Он обеспечивает выравнивание и отступы между компонентами, поддерживает адаптивное отображение элементов на разных устройствах.

Основные свойства Toolbar:

  • variant: задаёт размер и стиль панели. Возможные значения:

    • regular — стандартная высота (по умолчанию).
    • dense — уменьшенная высота для компактного интерфейса.

  • disableGutters: убирает горизонтальные отступы слева и справа.

Пример использования Toolbar с несколькими элементами:

import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Button from '@mui/material/Button';

<AppBar position="static">
  <Toolbar variant="dense">
    <IconButton edge="start" color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" sx={{ flexGrow: 1 }}>
      Приложение
    </Typography>
    <Button color="inherit">Войти</Button>
  </Toolbar>
</AppBar>

Управление позиционированием элементов

  • Свойство edge у IconButton позволяет разместить кнопку на левом (start) или правом (end) краю.
  • Свойство sx={{ flexGrow: 1 }} у Typography автоматически растягивает заголовок, создавая пространство между кнопками и текстом.
  • Для адаптивного скрытия элементов можно использовать компонент Hidden или Box с медиа-запросами (display: { xs: 'none', md: 'block' }).

AppBar с динамическим поведением

MUI поддерживает скрытие AppBar при прокрутке с помощью хука useScrollTrigger:

import React from 'react';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import Slide from '@mui/material/Slide';

function HideOnScroll({ children }) {
  const trigger = useScrollTrigger();
  
  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

<HideOnScroll>
  <AppBar>
    <Toolbar>
      <Typography variant="h6">Скрывающийся AppBar</Typography>
    </Toolbar>
  </AppBar>
</HideOnScroll>

Этот подход полезен для мобильных интерфейсов, где важно экономить экранное пространство.

Интеграция с навигацией

AppBar часто комбинируют с компонентами Drawer или Tabs для создания полноценной навигационной структуры:

  • Drawer: выезжающая боковая панель, управляется кнопкой внутри Toolbar.
  • Tabs: горизонтальная навигация, размещается внутри Toolbar для переключения между разделами.

Пример с Drawer:

import Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';

const [open, setOpen] = React.useState(false);

<IconButton onCl ick={() => setOpen(true)} color="inherit">
  <MenuIcon />
</IconButton>

<Drawer open={open} onCl ose={() => setOpen(false)}>
  <List>
    <ListItem button>Главная</ListItem>
    <ListItem button>Профиль</ListItem>
    <ListItem button>Настройки</ListItem>
  </List>
</Drawer>

Стилизация и кастомизация

  • Использование sx и styled позволяет переопределять отступы, цвета и высоту панели.
  • Применение темы (ThemeProvider) обеспечивает согласованность цвета и шрифтов по всему приложению.
  • Для динамических эффектов можно использовать анимацию Transition или изменение стилей на основе состояния (state).

Ключевые рекомендации по использованию AppBar и Toolbar

  • Всегда использовать Toolbar внутри AppBar для корректного выравнивания элементов.
  • Flex-контейнеры (display: 'flex') помогают распределять кнопки и текст.
  • Для мобильных версий оптимально использовать dense Toolbar и скрывать элементы через медиа-запросы.
  • AppBar лучше делать position="fixed" для постоянного доступа к навигации, но необходимо компенсировать высоту панели у основного контента через отступ.

AppBar и Toolbar образуют основу навигации в MUI и обеспечивают гибкую и современную структуру интерфейсов, которую легко адаптировать под разные устройства и сценарии использования.

Оглавление