Уведомления об успехе

Для использования 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>

При установке через npm:

npm install toastify-js

И последующий импорт в проекте:

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

После подключения библиотека готова к использованию.

Создание простого уведомления об успехе

Основной метод создания уведомления — вызов функции Toastify() с объектом настроек. Для уведомлений об успешном выполнении действий чаще всего используется зеленый фон, символизирующий успех.

Пример базового уведомления:

Toastify({
  text: "Операция выполнена успешно!",
  duration: 3000,
  gravity: "top", // верхнее расположение
  position: "right", // справа
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
}).showToast();

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

  • text — текст уведомления.
  • duration — время отображения в миллисекундах. Если указано -1, уведомление останется до закрытия вручную.
  • gravity — положение по вертикали ("top" или "bottom").
  • position — положение по горизонтали ("left", "center", "right").
  • backgroundColor — цвет фона, можно использовать градиенты для визуального акцента.

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

Иконки и HTML-контент

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

Toastify({
  node: (() => {
    const div = document.createElement("div");
    div.innerHTML = '<span style="font-weight:bold;">✔ Успех:</span> Данные сохранены';
    return div;
  })(),
  duration: 4000,
  gravity: "top",
  position: "right",
  close: true
}).showToast();

Особенности:

  • Параметр node позволяет полностью заменить текст уведомления собственным HTML.
  • close: true добавляет кнопку закрытия в правом верхнем углу.

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

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

Toastify({
  text: "Запись успешно обновлена!",
  duration: 3000,
  gravity: "top",
  position: "right",
  className: "toast-success"
}).showToast();

И CSS:

.toast-success {
  background: linear-gradient(to right, #00b09b, #96c93d);
  opacity: 0;
  animation: fadeIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

Таким образом уведомление появится плавно и исчезнет автоматически через заданное время.

Взаимодействие с пользователем

Закрытие уведомления по клику

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

Toastify({
  text: "Файл загружен!",
  duration: 5000,
  gravity: "top",
  position: "right",
  close: true,
  onClick: function() {
    console.log("Пользователь закрыл уведомление");
  }
}).showToast();
  • close: true — добавляет кнопку закрытия.
  • onClick — позволяет выполнить действие при нажатии на уведомление.

Привязка уведомлений к событиям

Уведомления часто используются в ответ на действия пользователя, например, успешное сохранение формы:

document.querySelector("#saveButton").addEventListener("click", () => {
  // имитация сохранения данных
  setTimeout(() => {
    Toastify({
      text: "Данные успешно сохранены!",
      duration: 3000,
      gravity: "top",
      position: "right",
      backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
    }).showToast();
  }, 500);
});

Гибкая стилизация через классы

Использование CSS-классов позволяет централизованно управлять стилем уведомлений:

.toast-success {
  background-color: #28a745;
  color: white;
  font-weight: 600;
  border-radius: 6px;
  padding: 12px 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
Toastify({
  text: "Операция успешно выполнена!",
  duration: 3000,
  className: "toast-success",
  gravity: "top",
  position: "right"
}).showToast();

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

Комбинация уведомлений и функций обратного вызова

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

Toastify({
  text: "Данные отправлены!",
  duration: 4000,
  gravity: "top",
  position: "right",
  close: true,
  callback: () => {
    console.log("Уведомление закрылось, можно выполнить следующий шаг");
  }
}).showToast();

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

Практические рекомендации

  • Для уведомлений об успехе использовать зеленые цвета и легкие градиенты.
  • Минимальная длительность отображения — 2-3 секунды, чтобы пользователь успел прочитать сообщение.
  • Если уведомление связано с критическим действием, добавлять кнопку закрытия и возможность отмены.
  • Централизованное управление стилями через CSS-классы упрощает поддержку и масштабирование проекта.

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

Оглавление