Позиционирование бейджей

Бейджи в библиотеке MUI (Material-UI) представляют собой визуальные индикаторы, часто используемые для отображения количества уведомлений или состояния элемента интерфейса. Управление их положением относительно основного компонента играет ключевую роль в организации интерфейса.

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

Компонент Badge принимает следующие ключевые свойства, отвечающие за позиционирование:

  • anchorOrigin – объект, определяющий точку привязки бейджа к родительскому компоненту.
  • overlap – режим наложения бейджа на компонент ("rectangular" или "circular").
  • variant – визуальный стиль бейджа ("standard" или "dot").
Пример базового синтаксиса:
<Badge
  badgeContent={4}
  color="primary"
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>
  <MailIcon />
</Badge>

В этом примере бейдж отображается в правом верхнем углу и содержит число уведомлений.

Настройка позиции с помощью anchorOrigin

anchorOrigin задаёт положение бейджа относительно родительского элемента:

anchorOrigin={{
  vertical: 'top' | 'bottom',
  horizontal: 'left' | 'right',
}}
  • vertical – определяет, привязан ли бейдж к верхней или нижней границе компонента.
  • horizontal – определяет привязку к левой или правой стороне.

Особенности:

  • Можно комбинировать любые значения, например { vertical: 'bottom', horizontal: 'left' }.
  • Для элементов с нестандартными размерами бейдж может частично выходить за границы родителя. Для корректного отображения рекомендуется использовать соответствующие стили контейнера.

Управление наложением через overlap

Свойство overlap позволяет выбрать форму области, к которой привязывается бейдж:

overlap="rectangular"  // для прямоугольных элементов, кнопок, карточек
overlap="circular"     // для круглых элементов, аватаров

Применение:

<Badge
  badgeContent={10}
  color="secondary"
  overlap="circular"
>
  <Avatar alt="User" src="/user.jpg" />
</Badge>

В случае аватаров или круглых иконок использование "circular" обеспечивает правильное позиционирование и равномерное расстояние от краев.

Изменение визуального положения через sx и CSS

Для точного позиционирования можно использовать sx или классические стили. Пример смещения бейджа:

<Badge
  badgeContent={99}
  color="error"
  sx={{
    '& .MuiBadge-badge': {
      right: -10,
      top: 5,
    },
  }}
>
  <MailIcon />
</Badge>
  • & .MuiBadge-badge – селектор самого бейджа.
  • right и top позволяют смещать бейдж относительно стандартного положения, определяемого anchorOrigin.

Комбинированное позиционирование и адаптивность

Для сложных интерфейсов, где компоненты могут менять размер или положение, используется комбинация anchorOrigin и динамического смещения через sx:

<Badge
  badgeContent={3}
  color="primary"
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'right',
  }}
  sx={{
    '& .MuiBadge-badge': {
      transform: 'translate(50%, 50%)',
    },
  }}
>
  <Button variant="contained">Messages</Button>
</Badge>
  • transform: translate(x, y) позволяет точнее подстраивать бейдж под дизайн.
  • Такая настройка особенно полезна для кнопок с динамическим размером текста или изменяющимся контентом.

Особенности работы с разными компонентами

  • Иконки и аватары – рекомендуется использовать overlap="circular".
  • Кнопки и карточки – предпочтительно overlap="rectangular".
  • Для элементов с изменяемым размером необходимо контролировать смещение через sx или CSS, чтобы бейдж не «съезжал» при адаптивной верстке.

Использование variant="dot" для минималистичных бейджей

Иногда требуется лишь индикатор состояния, без числового значения. Для этого используется:

<Badge
  variant="dot"
  color="success"
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>
  <NotificationsIcon />
</Badge>
  • Такой бейдж занимает меньше места и визуально аккуратен.
  • Смещение и позиционирование регулируются аналогично стандартным бейджам через anchorOrigin и sx.

Подводя к сути позиционирования

Правильное размещение бейджа достигается сочетанием трёх факторов:

  1. Выбор точки привязки через anchorOrigin – определяет базовое положение.
  2. Выбор формы наложения через overlap – обеспечивает правильную геометрию для конкретного элемента.
  3. Дополнительное смещение через sx или CSS – даёт гибкость и точность для кастомного дизайна.

Эти механизмы позволяют создавать как простые уведомительные бейджи, так и сложные, динамически адаптирующиеся индикаторы для любых интерфейсов в приложениях на MUI.

Оглавление