Структура базового вызова

Для использования Toastify необходимо подключить библиотеку через <script> или пакетный менеджер. После подключения создаётся объект уведомления с помощью функции Toastify(). Минимальная структура вызова выглядит следующим образом:

Toastify({
    text: "Сообщение уведомления"
}).showToast();
  • text — основной параметр, содержащий текст уведомления.
  • .showToast() — метод, запускающий отображение тоста.

Основные параметры

Помимо текста, Toastify предоставляет множество опций для кастомизации:

  • duration — время показа уведомления в миллисекундах. По умолчанию 3000.

    duration: 5000

  • destination — URL, на который произойдёт переход при клике на уведомление.

    destination: "https://example.com"

  • close — добавляет кнопку закрытия уведомления.

    close: true

  • gravity — вертикальное расположение: "top" или "bottom".

  • position — горизонтальное расположение: "left", "center" или "right".

  • style — объект CSS-стилей для индивидуального оформления.

    style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)"
}

  • className — добавляет пользовательский CSS-класс для стилизации.

Пример сложного вызова

Toastify({
    text: "Успешное сохранение данных!",
    duration: 4000,
    close: true,
    gravity: "top",
    position: "right",
    backgroundColor: "#4CAF50",
    stopOnFocus: true,
    onClick: function() {
        console.log("Тост кликнут");
    }
}).showToast();
  • stopOnFocus — при наведении мыши на уведомление его исчезновение приостанавливается.
  • onClick — функция, вызываемая при клике на уведомление.
  • backgroundColor — простая установка цвета фона через свойство Toastify.

Динамическая генерация уведомлений

Для создания уведомлений с различными параметрами в цикле или в ответ на события используется объект с параметрами, передаваемый в функцию Toastify():

const messages = [
    { text: "Ошибка загрузки", color: "red" },
    { text: "Данные сохранены", color: "green" },
    { text: "Внимание!", color: "orange" }
];

messages.forEach(msg => {
    Toastify({
        text: msg.text,
        duration: 3000,
        style: { background: msg.color }
    }).showToast();
});

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

Toastify поддерживает плавное появление и скрытие уведомлений без дополнительных библиотек. Для управления анимациями используется CSS или встроенные классы:

Toastify({
    text: "Сообщение с анимацией",
    className: "animated-toast",
    duration: 3500
}).showToast();

В CSS можно прописать собственные переходы:

.animated-toast {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

Использование HTML в уведомлениях

Для более сложных уведомлений допускается вставка HTML-разметки через параметр text:

Toastify({
    text: "Ссылка <a href='#'>подробнее</a>",
    escapeMarkup: false,
    duration: 5000
}).showToast();
  • escapeMarkup: false — отключает экранирование HTML, позволяя вставлять теги.

События жизненного цикла уведомления

Toastify предоставляет колбэки для управления поведением уведомлений:

  • onClick — при клике на тост.
  • callback — вызывается после скрытия уведомления (может быть полезно для очистки данных).
Toastify({
    text: "Обработка завершена",
    duration: 3000,
    callback: function() {
        console.log("Тост исчез");
    }
}).showToast();

Итоговая структура вызова

Базовый вызов Toastify всегда строится по следующему принципу:

  1. Создаётся объект через Toastify({ ...параметры... }).
  2. Задаются текст, позиция, стиль и поведение.
  3. Вызывается метод .showToast() для отображения.

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

Оглавление