Информационные уведомления

Для использования библиотеки 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 подключение происходит через импорт:

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

Создание базового уведомления

Основной метод библиотеки — Toastify(). Его вызов возвращает объект уведомления, который можно показать с помощью метода showToast().

Toastify({
  text: "Простое уведомление",
}).showToast();

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах (по умолчанию 3000).
  • gravity — положение по вертикали ("top" или "bottom").
  • position — положение по горизонтали ("left", "center", "right").
  • style — объект с CSS-стилями.
  • className — добавление CSS-класса для кастомизации.

Пример с кастомным стилем:

Toastify({
  text: "Стильное уведомление",
  duration: 4000,
  gravity: "top",
  position: "right",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
    color: "#fff",
    fontWeight: "bold"
  }
}).showToast();

Уведомления с действиями

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

Toastify({
  text: "Нажмите для действия",
  duration: 5000,
  close: true,
  onClick: function() {
    console.log("Уведомление было нажато");
  }
}).showToast();

Особенности параметров:

  • close: true добавляет кнопку закрытия уведомления.
  • onClick срабатывает при клике на уведомление.
  • Возможна комбинация с callback после закрытия уведомления через кнопку.

Настройка позиции уведомлений

Параметры gravity и position позволяют гибко управлять расположением. Доступны следующие варианты:

Параметр Возможные значения Описание
gravity “top”, “bottom” Вертикальное положение уведомления
position “left”, “center”, “right” Горизонтальное положение уведомления

Пример:

Toastify({
  text: "Уведомление в левом нижнем углу",
  gravity: "bottom",
  position: "left",
  duration: 3000
}).showToast();

Автоматическое закрытие и задержка

По умолчанию уведомления закрываются через 3 секунды. Время можно изменить через duration:

Toastify({
  text: "Уведомление с длительным показом",
  duration: 10000
}).showToast();

Для уведомлений без автоматического закрытия используется значение duration: -1:

Toastify({
  text: "Закройте меня вручную",
  duration: -1,
  close: true
}).showToast();

Кастомизация внешнего вида

style и className позволяют полностью управлять стилем уведомления. Можно использовать CSS-классы для глобального дизайна и inline-стили для уникальных случаев.

Пример с CSS-классом:

.my-toast {
  background-color: #ff6347;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
}
Toastify({
  text: "Уведомление с CSS-классом",
  className: "my-toast",
  duration: 4000
}).showToast();

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

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

const node = document.createElement("div");
node.innerHTML = '<strong>Важно!</strong> <a href="#">Перейти</a>';

Toastify({
  node: node,
  duration: 5000,
  gravity: "top",
  position: "center"
}).showToast();

Анимации и эффекты появления

Toastify поддерживает плавное появление и исчезновение уведомлений. Для этого можно использовать CSS-анимации через className или style. Пример:

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
Toastify({
  text: "Появление с анимацией",
  className: "fade-in",
  duration: 3000
}).showToast();

Множественные уведомления и очередь

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

Toastify({ text: "Первое уведомление", gravity: "top", position: "left" }).showToast();
Toastify({ text: "Второе уведомление", gravity: "top", position: "right" }).showToast();

Интеграция с событиями приложения

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

function saveData() {
  // логика сохранения
  Toastify({
    text: "Данные успешно сохранены",
    backgroundColor: "#4caf50",
    duration: 3000
  }).showToast();
}

function showError() {
  Toastify({
    text: "Ошибка при сохранении данных",
    backgroundColor: "#f44336",
    duration: 5000,
    close: true
  }).showToast();
}

Работа с динамическими уведомлениями

Можно создавать уведомления на основе динамических данных, например, из API или пользовательских форм:

fetch("/api/notifications")
  .then(response => response.json())
  .then(data => {
    data.forEach(item => {
      Toastify({
        text: item.message,
        duration: 4000,
        gravity: "top",
        position: "right",
        backgroundColor: item.type === "error" ? "#f44336" : "#2196f3"
      }).showToast();
    });
  });

Суммирование возможностей Toastify

  • Быстрое создание уведомлений с текстом или HTML.
  • Полная кастомизация внешнего вида через style и className.
  • Контроль позиции и времени отображения.
  • Возможность добавления кнопки закрытия и обработчиков событий.
  • Поддержка анимаций и динамических данных.
  • Совместимость с современными проектами через npm или CDN.
Оглавление