Полный список параметров

Для работы с библиотекой Toastify необходимо подключить её к проекту. Библиотека распространяется через CDN и npm-пакет:

Через 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
import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

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

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

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

Toastify предоставляет гибкую настройку уведомлений через объект конфигурации. Ниже перечислены ключевые параметры с подробным объяснением:

text

  • Тип: string
  • Описание: Текст уведомления.
  • Пример использования:
text: "Успешное действие"

duration

  • Тип: number (в миллисекундах)
  • Описание: Время отображения уведомления. Если указано -1, уведомление не исчезает автоматически.
  • Пример использования:
duration: 5000

destination

  • Тип: string (URL)
  • Описание: Если задан, уведомление становится ссылкой. При клике происходит переход по указанному URL.
  • Пример использования:
destination: "https://example.com"

newWindow

  • Тип: boolean
  • Описание: Открывать ссылку в новом окне/вкладке (только если задан destination).
  • Пример использования:
newWindow: true

close

  • Тип: boolean
  • Описание: Отображать кнопку закрытия уведомления.
  • Пример использования:
close: true

gravity

  • Тип: string ("top" или "bottom")
  • Описание: Положение уведомления по вертикали.
  • Пример использования:
gravity: "top"

position

  • Тип: string ("left", "center", "right")
  • Описание: Положение уведомления по горизонтали.
  • Пример использования:
position: "right"

stopOnFocus

  • Тип: boolean
  • Описание: При наведении мыши уведомление перестает исчезать до ухода курсора.
  • Пример использования:
stopOnFocus: true

style

  • Тип: object
  • Описание: Настройка CSS-стилей уведомления.
  • Пример использования:
style: {
  background: "linear-gradient(to right, #00b09b, #96c93d)",
  fontSize: "16px",
  color: "#fff"
}

className

  • Тип: string
  • Описание: Добавляет CSS-класс к уведомлению для кастомной стилизации.
  • Пример использования:
className: "custom-toast"

onClick

  • Тип: function
  • Описание: Функция, которая срабатывает при клике на уведомление.
  • Пример использования:
onClick: function() {
  console.log("Уведомление кликнуто");
}

callback

  • Тип: function
  • Описание: Функция, вызываемая после того, как уведомление исчезает.
  • Пример использования:
callback: function() {
  console.log("Уведомление закрыто");
}

offset

  • Тип: object
  • Описание: Смещение уведомления относительно края экрана.
  • Структура: {x: число, y: число}
  • Пример использования:
offset: {
  x: 50,
  y: 100
}

escapeMarkup

  • Тип: boolean
  • Описание: Запрещает интерпретацию HTML в тексте уведомления.
  • Пример использования:
escapeMarkup: true

Продвинутые возможности

Множественные уведомления с разными позициями:

Toastify({ text: "Слева", position: "left", gravity: "top" }).showToast();
Toastify({ text: "По центру", position: "center", gravity: "top" }).showToast();
Toastify({ text: "Справа", position: "right", gravity: "bottom" }).showToast();

Кастомная анимация через CSS:

.custom-toast {
  animation: slideIn 0.5s ease forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
Toastify({
  text: "Анимированное уведомление",
  className: "custom-toast"
}).showToast();

Использование destination и onClick одновременно:

Toastify({
  text: "Перейти на сайт",
  destination: "https://example.com",
  newWindow: true,
  onClick: function() { console.log("Ссылка нажата"); }
}).showToast();

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

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

Хотите, чтобы я её составил?

Оглавление