Создание собственных типов

Библиотека Toastify предоставляет простой способ отображения уведомлений на веб-странице, однако её стандартные уведомления ограничены базовыми параметрами, такими как текст, продолжительность и положение на экране. Для более гибкого интерфейса требуется создавать собственные типы уведомлений, расширяя возможности стандартного API.

Основные принципы кастомизации

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

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

Для создания собственного типа необходимо использовать комбинацию className и backgroundColor, а также расширять поведение через JavaScript.

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

Для реализации собственного типа уведомления удобно определять CSS-классы, которые будут определять визуальный стиль. Пример:

.toast-success {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  padding: 12px 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.toast-error {
  background-color: #F44336;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  padding: 12px 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.toast-warning {
  background-color: #FF9800;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  padding: 12px 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

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

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

function showCustomToast(message, type = 'success') {
    let className;
    switch(type) {
        case 'success':
            className = 'toast-success';
            break;
        case 'error':
            className = 'toast-error';
            break;
        case 'warning':
            className = 'toast-warning';
            break;
        default:
            className = '';
    }

    Toastify({
        text: message,
        duration: 4000,
        gravity: 'top',
        position: 'right',
        className: className,
        stopOnFocus: true,
        close: true
    }).showToast();
}

В этом примере функция showCustomToast автоматически подбирает CSS-класс в зависимости от типа уведомления, делая вызов более компактным и удобным.

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

Для повышения информативности уведомлений можно добавлять HTML-разметку. Toastify поддерживает использование элемента node вместо текста:

const toastNode = document.createElement("div");
toastNode.innerHTML = `
  <strong>Ошибка:</strong> Неверный ввод данных
  <span style="margin-left:10px;">&#9888;</span>
`;

Toastify({
    node: toastNode,
    duration: 5000,
    gravity: 'bottom',
    position: 'left',
    className: 'toast-error',
    stopOnFocus: true,
    close: true
}).showToast();

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

Расширение функциональности через события

Для собственных типов уведомлений важно учитывать обработку пользовательских действий. Toastify предоставляет события через опции callback и onClick. Пример:

Toastify({
    text: "Нажмите для отмены",
    duration: 7000,
    gravity: "top",
    position: "center",
    className: "toast-warning",
    close: true,
    onClick: () => {
        console.log("Пользователь нажал на уведомление");
    },
    callback: () => {
        console.log("Уведомление закрыто");
    }
}).showToast();

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

Практические рекомендации по кастомизации

  1. Использовать единый набор классов для всех уведомлений, чтобы стандартизировать визуальный стиль.
  2. Добавлять анимацию через CSS (transition, transform) для плавного появления и исчезновения.
  3. Избегать перегрузки контентом — уведомления должны быть лаконичными.
  4. Разделять поведение и оформление — логика уведомлений через JavaScript, стиль через CSS.
  5. Поддерживать доступность — добавлять атрибуты role="alert" для уведомлений с важной информацией.

Примеры комбинаций кастомных типов

  • Успех с иконкой и кнопкой закрытия
  • Ошибка с красным фоном и звуковым оповещением
  • Предупреждение с интерактивной ссылкой на документацию

Каждую комбинацию можно реализовать через разные CSS-классы и передаваемые функции callback и onClick, создавая единый, расширяемый набор уведомлений для проекта.

Итоговые возможности кастомных типов

Создание собственных типов в Toastify позволяет:

  • Полностью контролировать визуальный стиль уведомлений.
  • Добавлять интерактивность через события.
  • Включать сложную разметку с иконками, ссылками и кнопками.
  • Масштабировать уведомления без дублирования кода.

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

Оглавление