Интерактивные элементы

Для начала работы с Toastify необходимо подключить библиотеку к проекту. Она доступна через CDN и через менеджеры пакетов, такие как npm или yarn.

CDN-подключение:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Установка через npm:

npm install toastify-js

После установки через npm подключение в проекте на JavaScript выглядит следующим образом:

import Toastify from 'toastify-js'
import "toastify-js/src/toastify.css"

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

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

Toastify({
    text: "Сообщение уведомления",
    duration: 3000, // время отображения в миллисекундах
    close: true,    // добавляет кнопку закрытия
    gravity: "top", // положение: top или bottom
    position: "right", // положение по горизонтали: left, center, right
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", // фон уведомления
    stopOnFocus: true, // останавливает исчезновение при наведении курсора
}).showToast();

Ключевые параметры:

  • text – текст уведомления. Может содержать HTML.
  • duration – продолжительность отображения. Значение 0 оставляет уведомление до закрытия вручную.
  • close – добавляет крестик для закрытия.
  • gravity и position – определяют расположение на экране.
  • backgroundColor – цвет или градиент фона.
  • stopOnFocus – при наведении мыши уведомление не исчезает.

Настройка внешнего вида

Toastify позволяет полностью кастомизировать стиль уведомления:

  • Цвета и градиенты:
Toastify({
    text: "Градиентное уведомление",
    backgroundColor: "linear-gradient(to right, #ff6a00, #ee0979)"
}).showToast();
  • Кастомные CSS-классы:
Toastify({
    text: "Кастомный стиль",
    className: "custom-toast"
}).showToast();
.custom-toast {
    font-weight: bold;
    border-radius: 10px;
    padding: 16px 24px;
}
  • Иконки и HTML-содержимое:
Toastify({
    node: document.createElement("div").appendChild(
        Object.assign(document.createElement("span"), { innerHTML: "<strong>Важно!</strong> Новое уведомление" })
    )
}).showToast();

Интерактивные элементы

Кнопки действий внутри уведомлений:

Для добавления интерактивных элементов используется параметр node, который позволяет передать HTML-элемент с кнопкой:

const toastNode = document.createElement("div");
toastNode.innerHTML = 'Сообщение <button id="action-btn">Действие</button>';

Toastify({
    node: toastNode,
    duration: 5000
}).showToast();

document.getElementById("action-btn").addEventListener("click", () => {
    alert("Кнопка нажата!");
});

События Toastify:

  • onClick – срабатывает при клике на уведомление.
  • onClose – срабатывает при закрытии уведомления.
Toastify({
    text: "Кликни на меня",
    duration: 5000,
    onClick: () => console.log("Уведомление было нажато"),
    onClose: () => console.log("Уведомление закрыто")
}).showToast();

Управление видимостью уведомлений:

  • duration: 0 делает уведомление постоянным до закрытия.
  • Можно закрывать уведомление программно через вызов .hideToast():
const toast = Toastify({ text: "Закрытие вручную", duration: 0 }).showToast();
setTimeout(() => toast.hideToast(), 3000);

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

Toastify позволяет создавать несколько уведомлений одновременно, они будут располагаться друг под другом в зависимости от параметров gravity и position. Чтобы управлять порядком отображения, можно использовать массив или таймеры:

const messages = ["Первое", "Второе", "Третье"];
messages.forEach((msg, index) => {
    setTimeout(() => {
        Toastify({ text: msg, duration: 2000 }).showToast();
    }, index * 500);
});

Адаптивные уведомления

  • С исчезновением при наведении:
Toastify({
    text: "Остановить при наведении",
    stopOnFocus: true
}).showToast();
  • Мобильная адаптация: Toastify автоматически подстраивается под ширину экрана, но можно вручную управлять через CSS:
.toastify {
    width: 90%;
    max-width: 350px;
}

Интеграция с другими библиотеками

Toastify хорошо сочетается с библиотеками UI, такими как React, Vue, или jQuery, через создание DOM-элементов и передачу их через параметр node. Для React удобно создавать компонент-обертку, который управляет уведомлениями через состояние.

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

  • Подтверждение действий пользователя (удаление, сохранение, отправка формы).
  • Показ состояния загрузки с кнопкой отмены.
  • Встроенные подсказки и обучение в интерфейсе.
  • Интеграция с внешними API для отображения ответов в реальном времени.

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

Оглавление