Параметр gravity

Параметр gravity отвечает за вертикальное положение уведомления на экране. Он определяет, будет ли тост отображаться в верхней или нижней части окна браузера. В библиотеке Toastify этот параметр принимает два значения: "top" и "bottom".

Основной синтаксис

Toastify({
    text: "Пример уведомления",
    gravity: "top" // или "bottom"
}).showToast();
  • "top" — уведомление закрепляется у верхнего края экрана.
  • "bottom" — уведомление отображается у нижнего края экрана.

Если параметр gravity не указан, по умолчанию используется "top". Это позволяет разработчику быстро добавлять уведомления в привычной позиции без явного задания параметра.

Взаимодействие с другими параметрами

gravity тесно связан с параметрами position и offset.

  • position задает горизонтальное расположение тоста: "left", "center", "right".
  • offset позволяет смещать уведомление по вертикали или горизонтали относительно края экрана.

Пример комбинации:

Toastify({
    text: "Тост снизу справа",
    gravity: "bottom",
    position: "right",
    offset: {
        x: 20,
        y: 30
    }
}).showToast();

В этом случае уведомление будет отображено у нижнего правого угла с отступом 20px по горизонтали и 30px по вертикали.

Особенности отображения

  • При значении "top" уведомление появляется над контентом страницы и не перекрывает фиксированные элементы, если используется корректный z-index.
  • При "bottom" тост располагается под основным содержимым, что полезно для сообщений о завершении действий, таких как успешное сохранение формы.
  • При динамическом изменении контента страницы положение уведомления остается фиксированным относительно выбранной границы.

Примеры использования

  1. Верхнее уведомление для ошибок
Toastify({
    text: "Ошибка загрузки данных",
    gravity: "top",
    position: "center",
    backgroundColor: "#ff0000"
}).showToast();
  1. Нижнее уведомление для успешного действия
Toastify({
    text: "Данные успешно сохранены",
    gravity: "bottom",
    position: "right",
    duration: 3000
}).showToast();
  1. Комбинация с кастомным offset
Toastify({
    text: "Сообщение с отступами",
    gravity: "top",
    position: "left",
    offset: {
        x: 50,
        y: 100
    }
}).showToast();

Практические рекомендации

  • Использовать "top" для важных или критических уведомлений, которые требуют внимания пользователя.
  • "bottom" лучше подходит для информационных или вспомогательных сообщений, которые не требуют немедленного взаимодействия.
  • При множественных уведомлениях на странице gravity помогает структурировать их появление: верхние — важные, нижние — менее значимые.

Взаимодействие с анимацией

Параметр gravity влияет на направление анимации появления тоста:

  • "top" — тост выезжает сверху вниз.
  • "bottom" — тост выезжает снизу вверх.

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

Итог

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

Оглавление