Управление фокусом

Toastify — это легкая и простая в использовании библиотека для отображения уведомлений (toasts) на веб-страницах с использованием JavaScript. Основная идея состоит в том, чтобы создать всплывающее сообщение с минимальным кодом, управляемым через объектные настройки.

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

или через пакетный менеджер:

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

После подключения библиотека предоставляет функцию Toastify() для создания уведомлений с настраиваемыми параметрами.

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

Базовая структура уведомления включает текст и опции отображения:

Toastify({
    text: "Привет! Это уведомление Toastify",
    duration: 3000, // продолжительность отображения в миллисекундах
    gravity: "top", // "top" или "bottom"
    position: "right", // "left", "center", "right"
}).showToast();

Ключевые моменты:

  • text — текст уведомления.
  • duration — время жизни уведомления.
  • gravity и position — положение на экране.
  • Метод showToast() запускает отображение уведомления.

Управление фокусом и взаимодействием

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

Автооткрытие и задержка фокуса

По умолчанию уведомления исчезают после времени, указанного в duration. Чтобы сделать уведомление устойчивым к закрытию при наведении курсора, используется stopOnFocus:

Toastify({
    text: "Наведи на меня, чтобы задержать",
    duration: 5000,
    stopOnFocus: true, // при наведении уведомление не исчезает
}).showToast();
  • stopOnFocus: true — при наведении мыши таймер исчезновения приостанавливается.
  • После ухода курсора таймер возобновляется.

Добавление интерактивных элементов

Можно использовать onClick для управления фокусом и выполнением действий:

Toastify({
    text: "Нажми меня для действия",
    duration: 4000,
    onClick: function() {
        alert("Уведомление было нажато");
    }
}).showToast();
  • Событие onClick вызывается при клике на уведомление.
  • Это позволяет управлять фокусом, например, открывать модальные окна или перенаправлять на другую страницу.

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

Фокус на визуальной идентификации повышает удобство взаимодействия. Основные опции для кастомизации:

  • className — добавление CSS-классов для стилизации уведомления.
  • style — передача объекта с CSS-свойствами для динамической настройки:
Toastify({
    text: "Красочное уведомление",
    duration: 3000,
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)",
        color: "#fff",
        fontWeight: "bold"
    }
}).showToast();
  • close — добавление кнопки закрытия:
Toastify({
    text: "Можно закрыть вручную",
    close: true,
    duration: 5000
}).showToast();

При включенной кнопке close: true пользователь может вручную управлять фокусом уведомления и завершить его показ по желанию.

Множественные уведомления и управление фокусом

Toastify поддерживает одновременное отображение нескольких уведомлений. Чтобы управлять фокусом между ними:

  • Использовать разное position (top-right, top-left, bottom-right, bottom-left).
  • Контролировать время жизни и поведение через duration и stopOnFocus.
  • Для сложного управления можно динамически создавать массив уведомлений и управлять их вызовом по событию.
const messages = ["Первое уведомление", "Второе уведомление", "Третье уведомление"];
messages.forEach(msg => {
    Toastify({
        text: msg,
        duration: 4000,
        gravity: "top",
        position: "right",
        stopOnFocus: true
    }).showToast();
});
  • Каждое уведомление независимо реагирует на наведение.
  • Таймеры приостанавливаются при фокусе, обеспечивая удобство взаимодействия.

Управление фокусом через пользовательский контейнер

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

const container = document.createElement("div");
container.id = "toast-container";
document.body.appendChild(container);

Toastify({
    text: "Уведомление в кастомном контейнере",
    duration: 4000,
    gravity: "top",
    position: "center",
    node: container
}).showToast();
  • Опция node позволяет указать HTML-элемент для рендеринга уведомления.
  • Позволяет полностью контролировать фокусировку и порядок отображения сообщений.

Динамическое управление уведомлениями

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

const toast = Toastify({
    text: "Динамическое управление",
    duration: 10000,
    stopOnFocus: true
});

toast.showToast();

// Позднее можно программно закрыть уведомление
setTimeout(() => toast.hideToast(), 5000);
  • Метод hideToast() завершает уведомление в любой момент.
  • Управление через объект позволяет синхронизировать уведомления с пользовательскими действиями.

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

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

Оглавление