Методы и функции

Библиотека Toastify в JavaScript предоставляет удобный способ отображения уведомлений на веб-странице с минимальными усилиями. Основная функция для создания уведомления — Toastify({ ...options }).showToast();. Эта функция принимает объект конфигурации, который определяет поведение и внешний вид уведомления.

Параметры объекта конфигурации:

  • text — текст уведомления. Может содержать обычный текст или HTML-разметку при использовании опции escape: false.
  • duration — время отображения уведомления в миллисекундах. По умолчанию 3000. Если указать -1, уведомление будет отображаться до закрытия вручную.
  • destination — URL, на который пользователь будет перенаправлен при клике по уведомлению.
  • newWindow — логическое значение, указывающее открывать ли ссылку в новой вкладке (true) или в текущей (false).
  • close — отображение кнопки закрытия уведомления (true или false).
  • gravity — положение уведомления по вертикали: "top" или "bottom".
  • position — положение уведомления по горизонтали: "left", "center" или "right".
  • stopOnFocus — при true уведомление не исчезает, когда на него наведён курсор.
  • style — объект CSS-стилей для индивидуальной кастомизации внешнего вида уведомления.
  • className — CSS-класс для добавления собственной стилизации через внешние стили.

Показ уведомления

Для отображения уведомления используется метод:

Toastify({
    text: "Успешная операция",
    duration: 5000,
    gravity: "top",
    position: "right",
    close: true,
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)",
        color: "#fff"
    }
}).showToast();

Особенности работы метода showToast():

  • Метод создаёт DOM-элемент уведомления и добавляет его на страницу.
  • Уведомление автоматически исчезает через указанный duration.
  • Возможна последовательная установка нескольких уведомлений, которые будут появляться одно за другим.

Управление закрытием уведомления

Для ручного закрытия уведомления можно использовать метод hideToast():

let toast = Toastify({ text: "Закрываем уведомление вручную", duration: -1 }).showToast();
// позднее закрытие
toast.hideToast();

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

  • Полезно для уведомлений с duration: -1, которые требуют действия пользователя для закрытия.
  • hideToast() удаляет элемент из DOM, освобождая ресурсы страницы.

Встраивание HTML и кастомные кнопки

Для создания более сложных уведомлений можно использовать параметр escape: false, что позволяет вставлять HTML:

Toastify({
    text: '<strong>Важное сообщение</strong><button oncl ick="alert(\'Клик!\')">Действие</button>',
    duration: -1,
    escape: false,
    gravity: "bottom",
    position: "center"
}).showToast();

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

Подключение обратных вызовов

Хотя библиотека Toastify не имеет встроенной системы событий, можно использовать стандартные DOM-события через кастомные элементы уведомлений. Например, для реакции на клик:

let toastElement = Toastify({
    text: "Кликните для действия",
    duration: -1,
    escape: false
}).showToast();

toastElement.toastElement.addEventListener("click", () => {
    console.log("Уведомление кликнуто");
});

Настройка стиля и анимации

С помощью style и CSS-классов можно контролировать внешний вид и анимацию уведомлений:

Toastify({
    text: "Анимированное уведомление",
    duration: 4000,
    className: "my-toast",
    style: {
        background: "#333",
        color: "#fff",
        borderRadius: "8px",
        fontSize: "14px"
    }
}).showToast();
  • Класс my-toast можно использовать для добавления анимаций через CSS @keyframes.
  • Любые свойства CSS поддерживаются, включая тени, трансформации и градиенты.

Последовательное отображение уведомлений

Для отображения нескольких уведомлений последовательно можно использовать массив конфигураций и метод setTimeout:

const messages = ["Первое уведомление", "Второе уведомление", "Третье уведомление"];

messages.forEach((msg, i) => {
    setTimeout(() => {
        Toastify({ text: msg, duration: 2000, gravity: "top", position: "right" }).showToast();
    }, i * 2200);
});

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

Итоговые возможности методов Toastify

  • showToast() — отображение уведомления.
  • hideToast() — ручное скрытие уведомления.
  • escape — включение HTML-контента.
  • style / className — кастомизация внешнего вида.
  • gravity / position — размещение на экране.
  • duration / close / stopOnFocus — управление временем отображения и взаимодействием пользователя.

Эти методы и функции позволяют полностью контролировать уведомления, делая Toastify гибким инструментом для веб-интерфейсов.

Оглавление