Встраивание медиа-контента

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

npm install toastify-js

После установки библиотеку можно импортировать в ваш JavaScript-код:

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

Если используется 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>

Основы создания уведомлений

Создание уведомления осуществляется вызовом функции Toastify(), которой передаётся объект конфигурации:

Toastify({
  text: "Пример уведомления",
  duration: 3000,
  close: true,
  gravity: "top",
  position: "right",
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
}).showToast();

Ключевые параметры конфигурации:

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

Встраивание медиа-контента

Toastify позволяет вставлять HTML-контент, включая изображения, видео и иконки. Для этого используется параметр node, который принимает любой DOM-элемент. Пример уведомления с изображением:

const toastContent = document.createElement("div");
toastContent.innerHTML = `
  <img src="https://via.placeholder.com/40" alt="icon" style="vertical-align: middle; margin-right: 10px;">
  <span>Уведомление с изображением</span>
`;

Toastify({
  node: toastContent,
  duration: 5000,
  gravity: "top",
  position: "right",
  close: true
}).showToast();

Для вставки видео можно использовать тег <video> с атрибутами autoplay, muted и loop:

const videoToast = document.createElement("div");
videoToast.innerHTML = `
  <video width="160" height="90" autoplay muted loop>
    <source src="video.mp4" type="video/mp4">
    Ваш браузер не поддерживает видео.
  </video>
  <span>Видео уведомление</span>
`;

Toastify({
  node: videoToast,
  duration: 8000,
  gravity: "bottom",
  position: "center",
  close: true
}).showToast();

Стилизация медиа-контента

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

  • display: flex; — выравнивание элементов по горизонтали.
  • align-items: center; — вертикальное центрирование.
  • margin и padding — для отступов между элементами.

Пример:

toastContent.style.display = "flex";
toastContent.style.alignItems = "center";
toastContent.querySelector("img").style.marginRight = "10px";

Анимации и интерактивность

Toastify позволяет добавлять события на DOM-элементы уведомлений. Например, можно сделать кликабельный элемент для запуска видео или открытия ссылки:

toastContent.querySelector("span").addEventListener("click", () => {
  window.open("https://example.com", "_blank");
});

Для плавного появления и исчезновения можно использовать CSS-анимации:

.toastify {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Комбинированные уведомления

Медиа и текст можно комбинировать в едином уведомлении, создавая сложные структуры:

const combinedToast = document.createElement("div");
combinedToast.innerHTML = `
  <img src="icon.png" alt="icon" style="margin-right:10px; width:30px;">
  <div>
    <strong>Заголовок</strong>
    <p>Описание уведомления с медиа</p>
  </div>
`;

Toastify({
  node: combinedToast,
  duration: 7000,
  gravity: "top",
  position: "left",
  close: true
}).showToast();

Рекомендации по использованию медиа

  • Изображения должны иметь небольшие размеры, чтобы уведомление не занимало слишком много экрана.
  • Видео рекомендуется использовать короткие и без звука.
  • Для интерактивных элементов обязательно добавлять обработчики событий через addEventListener.
  • Стилизация через Flexbox или Grid обеспечивает корректное выравнивание контента внутри уведомлений.

Настройка глобальных опций

Для одинакового стиля всех уведомлений можно создать функцию-обёртку:

function createMediaToast(node, duration = 5000) {
  Toastify({
    node: node,
    duration: duration,
    gravity: "top",
    position: "right",
    close: true,
    stopOnFocus: true
  }).showToast();
}

Это упрощает интеграцию медиа-контента и делает код более поддерживаемым.

Оглавление