Предупреждения

Для начала необходимо подключить библиотеку Toastify к проекту. Существует два способа: через CDN или через пакетный менеджер npm/yarn. Использование CDN удобно для небольших проектов:

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

Для проектов с Node.js и сборщиками модулей предпочтительно использовать npm:

npm install toastify-js

И импортировать в коде:

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

Создание простого предупреждения

Минимальный пример уведомления выглядит следующим образом:

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

Если duration указано 0, уведомление не исчезает автоматически и требует ручного закрытия.

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

Toastify позволяет указывать позицию всплывающего сообщения с помощью параметров:

Toastify({
  text: "Предупреждение сверху справа",
  duration: 3000,
  gravity: "top", // 'top' или 'bottom'
  position: "right" // 'left', 'center', 'right'
}).showToast();
  • gravity определяет вертикальное расположение (top или bottom).
  • position задаёт горизонтальное положение (left, center, right).

Для точного позиционирования можно использовать offset:

Toastify({
  text: "Сдвинутое уведомление",
  duration: 3000,
  gravity: "top",
  position: "right",
  offset: { x: 50, y: 20 } // смещение по горизонтали и вертикали
}).showToast();

Стилизация предупреждений

Для кастомизации внешнего вида доступен параметр style:

Toastify({
  text: "Красное предупреждение",
  duration: 3000,
  style: {
    background: "linear-gradient(to right, #ff0000, #ff5555)",
    color: "#ffffff",
    fontWeight: "bold",
    borderRadius: "8px"
  }
}).showToast();

Можно комбинировать с CSS-классами через className:

Toastify({
  text: "Классное предупреждение",
  duration: 3000,
  className: "my-toast"
}).showToast();

И в CSS:

.my-toast {
  background-color: #ffcc00;
  color: #333;
  font-size: 16px;
}

Добавление действий и ссылок

Toastify позволяет превращать уведомление в интерактивное. Например, добавить переход по ссылке:

Toastify({
  text: "Перейти на сайт",
  duration: 5000,
  destination: "https://example.com",
  newWindow: true
}).showToast();

Параметры:

  • destination — URL для перехода при клике.
  • newWindow — открытие ссылки в новой вкладке.

Для произвольного действия можно использовать onClick:

Toastify({
  text: "Нажми меня",
  duration: 4000,
  close: true,
  onClick: function() {
    alert("Действие выполнено!");
  }
}).showToast();

Автоматическое закрытие и кнопка закрытия

По умолчанию уведомления исчезают через время, заданное в duration. Если нужно добавить ручное закрытие, используется параметр close:

Toastify({
  text: "Предупреждение с кнопкой закрытия",
  duration: 0,
  close: true
}).showToast();
  • Установив duration: 0, уведомление будет отображаться до ручного закрытия.
  • close: true добавляет кнопку крестика в правом верхнем углу.

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

Toastify поддерживает отображение нескольких сообщений одновременно. Новые уведомления появляются поверх предыдущих и автоматически сдвигают их вниз или вверх в зависимости от gravity. Можно управлять интервалом через задержку:

setTimeout(() => {
  Toastify({ text: "Второе предупреждение", duration: 3000 }).showToast();
}, 1000);

setTimeout(() => {
  Toastify({ text: "Третье предупреждение", duration: 3000 }).showToast();
}, 2000);

Анимации появления и исчезновения

По умолчанию Toastify использует плавное появление и исчезновение. Можно изменить их через CSS, например, для слайд-ин слева:

.toastify {
  transform: translateX(-100%);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.toastify.toastify-show {
  transform: translateX(0);
  opacity: 1;
}

Для динамических проектов анимации помогают подчеркнуть важность предупреждений.

Совместимость с темами и адаптивность

Toastify легко интегрируется в светлые и тёмные темы. Цвета можно задавать динамически через CSS-переменные или JS:

Toastify({
  text: "Тёмная тема",
  duration: 3000,
  style: {
    background: getComputedStyle(document.documentElement).getPropertyValue('--toast-bg'),
    color: getComputedStyle(document.documentElement).getPropertyValue('--toast-color')
  }
}).showToast();

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

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

Toastify легко внедряется в SPA, React, Vue и другие фреймворки. В React, например, уведомление можно вызывать через обработчики событий:

const handleClick = () => {
  Toastify({
    text: "Предупреждение в React",
    duration: 3000
  }).showToast();
};

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

Оглавление