Консистентность в UI

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

Библиотека подключается через CDN или через npm. Пример подключения через 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>

Через npm:

npm install toastify-js

Подключение через модуль ES6:

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

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

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

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

Пример базового уведомления:

Toastify({
  text: "Операция выполнена успешно",
  duration: 3000,
  gravity: "top",
  position: "right",
  backgroundColor: "#4CAF50"
}).showToast();

Консистентность визуальных стилей

Для единообразия интерфейса важно стандартизировать цветовую гамму, размеры, положение и время отображения уведомлений. Например, положительные действия могут использовать зелёный фон, ошибки — красный, предупреждения — оранжевый.

const toastOptions = {
  success: {
    backgroundColor: "#4CAF50",
    duration: 3000
  },
  error: {
    backgroundColor: "#F44336",
    duration: 5000
  },
  warning: {
    backgroundColor: "#FF9800",
    duration: 4000
  }
};

Создание уведомлений с использованием этих настроек повышает консистентность UI:

function showToast(type, message) {
  Toastify({
    text: message,
    duration: toastOptions[type].duration,
    backgroundColor: toastOptions[type].backgroundColor,
    gravity: "top",
    position: "right",
    close: true
  }).showToast();
}

showToast("success", "Данные сохранены");
showToast("error", "Произошла ошибка при загрузке");

Анимация и пользовательский опыт

Toastify поддерживает плавные появления и исчезновения, что делает интерфейс более мягким. Можно настроить анимацию через CSS или использовать встроенные свойства:

Toastify({
  text: "Сообщение с анимацией",
  duration: 3000,
  gravity: "bottom",
  position: "center",
  stopOnFocus: true, // Останавливает таймер при наведении
  className: "toast-animated"
}).showToast();

Пример CSS для кастомной анимации:

.toast-animated {
  animation: slideIn 0.5s, fadeOut 0.5s 2.5s;
}

@keyframes slideIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

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

const Notifications = {
  form: (message) => showToast("success", message),
  system: (message) => showToast("warning", message),
  error: (message) => showToast("error", message)
};

Notifications.form("Форма успешно отправлена");
Notifications.system("Запуск фоновой задачи");
Notifications.error("Ошибка подключения к серверу");

Доступность и взаимодействие с пользователем

Чтобы уведомления не мешали пользователю, важно учитывать:

  • stopOnFocus — при наведении мышью таймер паузится.
  • close — кнопка закрытия для самостоятельного dismiss.
  • ARIA-метки — для поддержки экранных читалок.
Toastify({
  text: "Обновление данных доступно",
  duration: 5000,
  gravity: "top",
  position: "right",
  close: true,
  stopOnFocus: true,
  ariaLive: "polite"
}).showToast();

Расширенные возможности кастомизации

  • Динамическое позиционирование: уведомления можно отображать рядом с элементами интерфейса.
  • HTML-контент: можно использовать node вместо text для сложных уведомлений.
  • Темы: определение глобальных тем с единым стилем для всех уведомлений.

Пример с HTML-контентом:

Toastify({
  node: document.createElement("div"),
  gravity: "top",
  position: "right",
  close: true
});
const customNode = document.createElement("div");
customNode.innerHTML = "<strong>Внимание:</strong> Новое сообщение!";
Toastify({ node: customNode }).showToast();

Практика консистентности в крупном проекте

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

  • Цвета и иконки по типам уведомлений
  • Длительность показа
  • Расположение
  • Общие классы для анимации

Пример структуры:

export const ToastConfig = {
  default: { gravity: "top", position: "right", close: true },
  types: {
    success: { backgroundColor: "#4CAF50", duration: 3000 },
    error: { backgroundColor: "#F44336", duration: 5000 },
    warning: { backgroundColor: "#FF9800", duration: 4000 }
  }
};

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

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

Оглавление