Нейтральные уведомления

Toastify — это лёгкая библиотека для отображения уведомлений в браузере. Она позволяет создавать простые и настраиваемые тосты (toast), которые появляются поверх контента страницы и автоматически исчезают через заданное время. Уведомления можно позиционировать, стилизовать и управлять их поведением без сложной структуры HTML.

Подключение 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

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

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

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

Toastify({
  text: "Это нейтральное уведомление",
  duration: 3000, // время отображения в миллисекундах
}).showToast();

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

  • text — текст уведомления.
  • duration — время показа тоста (по умолчанию 3000 мс). Если указать -1, уведомление останется до закрытия вручную.
  • close — добавление кнопки закрытия (true или false).

Позиционирование уведомлений

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

Toastify({
  text: "Тост в правом верхнем углу",
  duration: 4000,
  gravity: "top", // 'top' или 'bottom'
  position: "right" // 'left', 'center', 'right'
}).showToast();

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

  • gravity определяет вертикальное положение (верх/низ).
  • position управляет горизонтальным выравниванием.
  • Можно комбинировать top + center для центрирования уведомления сверху.

Настройка внешнего вида

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

Toastify({
  text: "Нейтральный тост с индивидуальной стилизацией",
  duration: 3000,
  style: {
    background: "#333", // темный фон
    color: "#fff",      // белый текст
    fontSize: "14px",
    borderRadius: "4px"
  }
}).showToast();

Советы по стилю:

  • Поддерживается стандартная CSS-поддержка: padding, margin, box-shadow.
  • Для нейтрального уведомления лучше избегать ярких цветов вроде красного или зеленого, чтобы не создавать ощущение ошибки или успеха.
  • Можно использовать прозрачность через rgba, чтобы тост был менее навязчивым.

Управление поведением уведомлений

  • Автоматическое закрытие: управляется параметром duration.
  • Закрытие вручную: добавление close: true и отображение крестика.
  • События клика: для реакции на действия пользователя:
Toastify({
  text: "Нажмите, чтобы закрыть",
  duration: 5000,
  close: true,
  onClick: function() {
    console.log("Тост был нажат");
  }
}).showToast();
  • Позиционирование и смещение: с помощью offset можно задать смещение по оси X и Y:
Toastify({
  text: "Тост с отступом",
  duration: 3000,
  gravity: "top",
  position: "right",
  offset: { x: 50, y: 20 } // смещение от верхнего правого угла
}).showToast();

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

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

const messages = [
  "Первое нейтральное уведомление",
  "Второе уведомление",
  "Третье уведомление"
];

messages.forEach(msg => {
  Toastify({ text: msg, duration: 2500 }).showToast();
});

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

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

Использование иконок и изображений

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

Toastify({
  node: (() => {
    const div = document.createElement("div");
    div.innerHTML = '<img src="icon.png" style="width:16px;margin-right:8px;"> Нейтральный тост';
    return div;
  })(),
  duration: 4000
}).showToast();
  • Используется свойство node для передачи кастомного DOM-элемента.
  • Поддерживается любой HTML и стилизация внутри тоста.

Продвинутая кастомизация

  • Добавление классов: через className можно подключать внешние CSS-классы:
Toastify({
  text: "Тост с кастомным классом",
  className: "neutral-toast",
  duration: 3000
}).showToast();
  • Градиенты и фоновые изображения: через style.background можно использовать линейные градиенты или URL:
Toastify({
  text: "Тост с градиентом",
  duration: 3500,
  style: { background: "linear-gradient(to right, #555, #888)" }
}).showToast();
  • Анимация появления: библиотека поддерживает плавное появление и исчезновение по умолчанию. Для более сложной анимации можно использовать CSS-анимации на кастомных классах.

Взаимодействие с другими элементами страницы

  • Toastify не блокирует интерфейс, поэтому можно одновременно использовать формы, кнопки и другие элементы.
  • Для предотвращения наложения тостов на важный контент рекомендуется использовать position и offset.
  • Можно динамически изменять стили уведомлений в зависимости от состояния страницы или событий пользователя.

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

Оглавление