Первое уведомление

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

Через CDN достаточно добавить в HTML-файл ссылки на стили и скрипт:

<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

И подключение в JavaScript-файле:

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

Это создаёт возможность использовать Toastify в любых современных сборщиках, таких как Webpack или Vite.

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

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

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

Пояснения к параметрам:

  • text — текст, который будет отображён в уведомлении.
  • duration — время отображения в миллисекундах. Если указано 0, уведомление останется на экране до закрытия пользователем.

Метод .showToast() инициирует отображение уведомления.

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

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

Позиционирование

  • gravity: положение по вертикали ("top" или "bottom").
  • position: положение по горизонтали ("left", "center", "right").

Пример:

Toastify({
  text: "Уведомление внизу справа",
  gravity: "bottom",
  position: "right",
  duration: 3000
}).showToast();

Стиль и внешний вид

  • backgroundColor — цвет фона уведомления.
  • className — возможность добавить CSS-класс для кастомного оформления.
  • style — объект с CSS-свойствами.

Пример:

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

Действия при клике

  • onClick — функция, которая выполняется при клике по уведомлению.
  • destination — URL, по которому произойдёт переход при клике.

Пример:

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

Кнопка закрытия

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

Toastify({
  text: "Закрываемое уведомление",
  duration: 5000,
  close: true
}).showToast();

Уведомление можно закрыть и программно, если сохранить объект:

const toast = Toastify({
  text: "Уведомление с закрытием",
  duration: 0,
  close: true
});
toast.showToast();

// Через некоторое время закрываем
setTimeout(() => toast.hideToast(), 3000);

Несколько уведомлений

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

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

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

Toastify поддерживает простые анимации, настраиваемые через CSS. Например, можно создать плавное появление и скрытие:

.toastify {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}
.toastify.toastify-show {
  opacity: 1;
  transform: translateY(0);
}

Заключение по первому уведомлению

Создание первого уведомления с Toastify не требует сложных настроек. Основные шаги включают подключение библиотеки, вызов Toastify({...}).showToast(), настройку позиции, стиля и действий при клике. В дальнейшем эти базовые знания позволяют создавать динамичные и интерактивные уведомления для веб-приложений.

Оглавление