Позиционирование уведомлений

Radix UI предоставляет модуль Toast, который используется для отображения уведомлений в интерфейсе. Одной из ключевых задач при работе с уведомлениями является их правильное позиционирование на экране, чтобы они не перекрывали важный контент и обеспечивали удобство взаимодействия пользователя.

Контейнер уведомлений

Все уведомления в Radix UI должны рендериться внутри компонента Toast.Provider, который управляет жизненным циклом уведомлений и их позиционированием. Для настройки позиции используется компонент Toast.Viewport, который отвечает за контейнер уведомлений. Пример базовой структуры:

import * as Toast from '@radix-ui/react-toast';

<Toast.Provider>
  <Toast.Root>
    <Toast.Title>Успешно сохранено</Toast.Title>
    <Toast.Description>Ваши изменения применены</Toast.Description>
  </Toast.Root>

  <Toast.Viewport />
</Toast.Provider>

Toast.Viewport может быть расположен в любой части экрана, управляя выравниванием уведомлений.

Позиционирование через стили

Для управления расположением уведомлений используется CSS-свойство position. Radix UI не жестко ограничивает способ позиционирования: контейнер можно закрепить в верхнем правом углу, нижнем левом или по центру экрана. Пример для правого верхнего угла:

.ToastViewport {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  z-index: 9999;
}

Здесь ключевыми моментами являются:

  • position: fixed — закрепляет уведомления относительно окна браузера.
  • flex-direction: column — уведомления располагаются вертикально.
  • gap — задаёт расстояние между несколькими уведомлениями.
  • z-index — гарантирует отображение поверх остального контента.

Управление направлениями появления уведомлений

Radix UI позволяет гибко управлять направлением появления уведомлений через side и align в Toast.Viewport. Это позволяет создавать разные комбинации, например, уведомления справа сверху или снизу по центру. Пример:

<Toast.Viewport
  className="ToastViewport"
  style={{
    top: 16,
    right: 16,
    bottom: 'auto',
    left: 'auto'
  }}
/>
  • top и bottom — управляют вертикальным расположением.
  • left и right — управляют горизонтальным положением.
  • Можно комбинировать значения для центрирования уведомлений: top: 50%, left: 50%, с последующим transform: translate(-50%, -50%).

Анимация появления уведомлений

Radix UI использует встроенные анимации появления и скрытия уведомлений. Их поведение можно настраивать через CSS-переменные и классы. Основные состояния:

  • open — уведомление появляется.
  • closed — уведомление скрывается.
  • swipe — жест смахивания для закрытия.

Пример настройки анимации для уведомлений, появляющихся сверху:

.ToastRoot {
  animation: slideIn 0.3s ease-out, fadeOut 0.2s 3s ease-in forwards;
}

@keyframes slideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

Отступы и адаптивность

Важно учитывать размер экрана и отступы от краев. Radix UI позволяет использовать любой CSS, чтобы уведомления не перекрывали основной контент. Например:

@media (max-width: 600px) {
  .ToastViewport {
    width: 90%;
    left: 5%;
    right: 5%;
    top: 10px;
  }
}

Такое решение обеспечивает адаптивность и корректное отображение уведомлений на мобильных устройствах.

Совмещение нескольких уведомлений

Для нескольких уведомлений в одном контейнере важно управлять gap и flex-direction. Radix UI автоматически выстраивает уведомления в указанном направлении, но дизайн может потребовать разные позиции для разных типов уведомлений, например:

  • Ошибки — снизу по центру.
  • Успешные действия — сверху справа.
  • Информационные — верхний левый угол.

В этом случае создаются несколько Toast.Viewport с разными стилями и позициями.

Настройка закрытия уведомлений

Положение уведомления напрямую влияет на UX при закрытии. Важно:

  • Установить видимый крестик или кнопку закрытия (Toast.Close).
  • Поддерживать свайп для мобильных устройств.
  • Автоматически скрывать уведомление через duration в миллисекундах:
<Toast.Root duration={5000}>
  <Toast.Title>Уведомление</Toast.Title>
  <Toast.Description>Описание уведомления</Toast.Description>
  <Toast.Close />
</Toast.Root>

Практические советы

  • Использовать фиксированное позиционирование для видимости поверх контента.
  • Разделять уведомления по типу, если они имеют разное визуальное значение.
  • Комбинировать анимации появления/скрытия с положением для естественного UX.
  • Поддерживать адаптивный дизайн с медиа-запросами и процентными отступами.

Реализация позиционирования уведомлений в Radix UI строится на гибкой комбинации Toast.Provider, Toast.Viewport и CSS, что позволяет создавать сложные интерфейсы с многократными уведомлениями и разными типами их отображения.

Оглавление