Позиционирование на экране

Библиотека Toastify предоставляет гибкие возможности для отображения уведомлений в любом углу экрана. Позиционирование уведомлений осуществляется через объект настроек при вызове функции Toastify(). Основной параметр для управления расположением — position, который может принимать предопределённые строки или быть кастомизирован с помощью CSS-свойств.

Toastify({
  text: "Уведомление",
  duration: 3000,
  position: "top-right" // top-left, top-center, bottom-left, bottom-right, bottom-center
}).showToast();

Здесь top-right означает верхний правый угол окна. Аналогично, top-left — верхний левый, bottom-right — нижний правый, bottom-left — нижний левый.

Использование центрирования

Для центрирования уведомлений по горизонтали можно использовать позиции top-center и bottom-center. Это особенно удобно для важной информации, которую необходимо сразу заметить:

Toastify({
  text: "Центрированное уведомление",
  duration: 4000,
  position: "top-center"
}).showToast();

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

Тонкая настройка через CSS

Для более точного управления положением можно использовать параметры gravity и offset.

  • gravity — отвечает за вертикальное расположение уведомления: "top" или "bottom".
  • offset — объект, задающий смещение по оси X и Y:
Toastify({
  text: "Уведомление с кастомным смещением",
  duration: 3000,
  gravity: "top",
  position: "left",
  offset: {
    x: 50, // смещение по горизонтали
    y: 20  // смещение по вертикали
  }
}).showToast();

Здесь x задаёт отступ от выбранного края по горизонтали, а y — по вертикали. Такое управление позволяет размещать уведомления не строго в углах, а с индивидуальными отступами, что важно для уникальных макетов.

Позиционирование нескольких уведомлений

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

Можно контролировать расстояние между уведомлениями через кастомный CSS:

.toastify {
  margin-bottom: 10px; /* Расстояние между уведомлениями */
}

Динамическое позиционирование

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

const toast = Toastify({
  text: "Динамическое уведомление",
  duration: 5000,
  gravity: "bottom",
  position: "right"
});

toast.showToast();

// Через некоторое время изменяем позицию
setTimeout(() => {
  toast.options.gravity = "top";
  toast.showToast();
}, 2000);

Такое динамическое управление полезно для систем с несколькими зонами уведомлений.

Комбинирование с анимациями

Положение уведомления напрямую влияет на восприятие анимации появления. Toastify поддерживает плавное появление и исчезновение через CSS, что позволяет создавать естественные эффекты сдвига и выезда уведомлений из выбранной позиции:

Toastify({
  text: "С анимацией",
  duration: 3000,
  gravity: "top",
  position: "right",
  close: true,
  stopOnFocus: true,
  style: {
    transform: "translateY(-20px)", // начальное смещение для анимации
    transition: "transform 0.3s ease"
  }
}).showToast();

Это даёт возможность визуально подчеркнуть важность уведомления, при этом оно не мешает основной работе пользователя.

Адаптация под разные экраны

Для мобильных устройств и маленьких экранов часто используют верхние или нижние центры (top-center, bottom-center) для компактного и заметного отображения. При необходимости можно применять медиа-запросы CSS для корректировки отступов и позиции:

@media (max-width: 600px) {
  .toastify {
    left: 10px !important;
    right: 10px !important;
  }
}

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

Вывод

Позиционирование в Toastify сочетает простоту предустановленных вариантов с гибкостью тонкой настройки через offset, gravity и CSS. Это позволяет легко управлять местом отображения уведомлений, адаптировать их для различных устройств и создавать визуально удобный пользовательский интерфейс.

Оглавление