Автоматическая адаптация

Для работы с Toastify необходимо подключить библиотеку к проекту. Наиболее распространённые способы:

  1. Через CDN:
  1. Через npm:
npm install toastify-js

После установки через npm подключение осуществляется через импорт:

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

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

Основной объект библиотеки — функция Toastify(). Она принимает объект с настройками:

Toastify({
  text: "Сообщение успешно отправлено",
  duration: 3000, // Время отображения в миллисекундах
  close: true,    // Отображение кнопки закрытия
  gravity: "top", // Расположение: top или bottom
  position: "right", // Позиция: left, center, right
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)"
  }
}).showToast();

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

  • text — текст уведомления.
  • duration — продолжительность показа. Если указать -1, уведомление останется до закрытия пользователем.
  • close — добавляет кнопку закрытия.
  • gravity и position — управляют расположением уведомления на экране.
  • style — позволяет задавать CSS стили непосредственно через объект.

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

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

Пример адаптивного уведомления:

const isMobile = window.innerWidth <= 768;

Toastify({
  text: "Вы находитесь на мобильном устройстве",
  duration: 4000,
  gravity: isMobile ? "bottom" : "top",
  position: isMobile ? "center" : "right",
  style: {
    background: "#FF6B6B",
    width: isMobile ? "90%" : "300px",
    margin: "0 auto",
    borderRadius: "8px",
    textAlign: "center"
  }
}).showToast();

В этом примере уведомление:

  • Меняет положение в зависимости от ширины экрана.
  • Автоматически подбирает ширину и выравнивание, чтобы уведомление выглядело корректно на мобильных устройствах.

Использование callback для адаптивного поведения

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

Toastify({
  text: "Нажмите, чтобы перейти",
  duration: 5000,
  gravity: "top",
  position: "center",
  onClick: function() {
    if (window.innerWidth < 768) {
      window.location.href = "/mobile";
    } else {
      window.location.href = "/desktop";
    }
  },
  style: { background: "#1E90FF" }
}).showToast();

Такое решение позволяет адаптировать функциональность уведомления под устройство, сохраняя единый код для всех платформ.

Динамическое изменение стиля после показа

Для автоматической адаптации можно изменять стили уже отображаемого уведомления через метод showToast():

let toast = Toastify({
  text: "Пример адаптации после показа",
  duration: 3000,
  style: { background: "#FFA500" }
});

toast.showToast();

// Через некоторое время изменить стиль
setTimeout(() => {
  toast.toastElement.style.background = "#32CD32";
  toast.toastElement.style.fontSize = "18px";
}, 1500);

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

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

Для проектов с разной шириной экранов часто создают функцию-обёртку:

function showAdaptiveToast(message, type = "info") {
  const isMobile = window.innerWidth <= 768;
  const colors = {
    info: "#3498db",
    success: "#2ecc71",
    error: "#e74c3c"
  };

  Toastify({
    text: message,
    duration: 4000,
    gravity: isMobile ? "bottom" : "top",
    position: isMobile ? "center" : "right",
    close: true,
    style: {
      background: colors[type],
      width: isMobile ? "90%" : "350px",
      textAlign: "center",
      borderRadius: "6px"
    }
  }).showToast();
}

// Использование
showAdaptiveToast("Данные успешно сохранены", "success");

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

Поддержка адаптивных тем

Toastify совместим с динамическими темами страницы. Можно проверять текущую тему (светлую или тёмную) и подстраивать уведомления:

const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

Toastify({
  text: "Тёмная тема активна",
  duration: 3000,
  style: {
    background: isDarkMode ? "#333" : "#eee",
    color: isDarkMode ? "#fff" : "#000"
  }
}).showToast();

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

Использование адаптивных анимаций

Toastify поддерживает CSS-анимации через style и ключи transition:

Toastify({
  text: "Анимация при адаптивном появлении",
  duration: 3500,
  gravity: "top",
  position: "center",
  style: {
    background: "#8e44ad",
    transform: "translateY(-100%)",
    transition: "transform 0.5s ease-in-out"
  },
  callback: () => {
    toast.toastElement.style.transform = "translateY(0)";
  }
}).showToast();

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

Оглавление