Приоритизация информации

Для работы с библиотекой Toastify необходимо подключить её в проект. В браузерной среде это делается через 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>

В средах с использованием сборщиков модулей (Webpack, Vite, Parcel) рекомендуется установка через npm:

npm install toastify-js

Импорт в модуле Jav * aScript:

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

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

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

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

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

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

Цвет и стиль уведомления:

Toastify({
    text: "Ошибка при загрузке данных",
    duration: 5000,
    close: true,
    gravity: "top",
    position: "right",
    backgroundColor: "#ff6b6b",
    style: {
        fontWeight: "bold",
        fontSize: "14px",
        borderRadius: "8px"
    }
}).showToast();

Можно комбинировать backgroundColor с CSS-свойством style для более гибкого оформления, включая тени, анимации и шрифты.

Использование градиентов и изображений:

Toastify({
    text: "Скачивание завершено",
    duration: 4000,
    gravity: "bottom",
    position: "center",
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
    avatar: "icon-success.png",
    stopOnFocus: true
}).showToast();

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

Приоритизация информации

Toastify позволяет визуально различать важность уведомлений с помощью:

  1. Цветовой кодировки — красный для ошибок, жёлтый для предупреждений, зелёный для успешных действий.
  2. Позиционирования — более важные уведомления можно размещать вверху (gravity: "top"), менее важные — внизу.
  3. Продолжительности отображения — ключевая информация требует большего времени (duration: 5000-8000), второстепенная — меньше (duration: 2000-3000).
  4. Анимаций и стиля текста — использование жирного шрифта, теней, границ и аватаров помогает привлечь внимание.
const notifications = [
    { text: "Ошибка сервера", type: "error" },
    { text: "Файл загружен", type: "success" },
    { text: "Срок действия сессии скоро истечет", type: "warning" }
];

notifications.forEach(note => {
    let bgColor;
    switch(note.type) {
        case "error": bgColor = "#ff4d4f"; break;
        case "success": bgColor = "#52c41a"; break;
        case "warning": bgColor = "#faad14"; break;
    }

    Toastify({
        text: note.text,
        duration: 5000,
        close: true,
        gravity: "top",
        position: "right",
        backgroundColor: bgColor,
        stopOnFocus: true,
        style: { fontWeight: "bold" }
    }).showToast();
});

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

В случаях большого количества сообщений важно управлять их порядком и видимостью. Toastify не имеет встроенной очереди, но можно реализовать собственную:

const queue = [];
let isShowing = false;

function showNext() {
    if(queue.length === 0) { 
        isShowing = false;
        return;
    }
    isShowing = true;
    const next = queue.shift();
    Toastify(next).showToast();
    setTimeout(showNext, next.duration || 3000);
}

function enqueueNotification(config) {
    queue.push(config);
    if(!isShowing) showNext();
}

enqueueNotification({ text: "Первое уведомление", duration: 3000 });
enqueueNotification({ text: "Второе уведомление", duration: 4000 });

Таким образом, можно гарантировать, что уведомления отображаются последовательно, при этом приоритет отображения определяется порядком добавления в очередь и параметрами конфигурации.

События и обратные вызовы

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

  • onClick — обработка клика по уведомлению.
  • callback — вызывается после завершения таймера отображения.
Toastify({
    text: "Нажми для действия",
    duration: 5000,
    close: true,
    onClick: () => console.log("Уведомление кликнуто"),
    callback: () => console.log("Уведомление скрыто")
}).showToast();

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

Интеграция с асинхронными процессами

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

async function fetchData() {
    enqueueNotification({ text: "Загрузка данных...", duration: 3000, backgroundColor: "#1890ff" });
    try {
        const response = await fetch("/api/data");
        if(!response.ok) throw new Error("Ошибка сервера");
        enqueueNotification({ text: "Данные загружены успешно", duration: 4000, backgroundColor: "#52c41a" });
    } catch(err) {
        enqueueNotification({ text: err.message, duration: 5000, backgroundColor: "#ff4d4f" });
    }
}

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

Оглавление