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

Библиотека iziToast предоставляет стандартные типы уведомлений: success, error, warning, info. Однако для сложных приложений часто требуется создавать собственные типы уведомлений с уникальным стилем, поведением и визуальными эффектами. Пользовательские типы позволяют унифицировать интерфейс уведомлений и адаптировать их под дизайн конкретного проекта.

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

Функция iziToast.settings() позволяет определить новые шаблоны уведомлений с уникальными параметрами. Основной подход — это создание функции-обёртки, которая использует базовый метод iziToast.show() с предустановленными настройками:

function customNotification(message, title) {
    iziToast.show({
        title: title || 'Внимание',
        message: message,
        theme: 'dark',
        color: 'purple',
        icon: 'fa fa-star',
        position: 'topRight',
        timeout: 5000,
        progressBar: true,
        close: true,
        animateInside: true,
        onOpening: function(instance, toast){
            console.log('Уведомление открывается');
        },
        onClosing: function(instance, toast, closedBy){
            console.log('Уведомление закрывается');
        }
    });
}

Ключевые моменты при создании собственного типа:

  • title и message — обязательные параметры, задают текст уведомления.
  • theme может быть light или dark, влияет на общий стиль.
  • color задаёт цветовую схему блока уведомления. Можно использовать как стандартные цвета, так и кастомные HEX/RGB.
  • icon позволяет указать иконку, поддерживаются FontAwesome и Material Icons.
  • position определяет место появления: topRight, topLeft, bottomRight, bottomLeft, center.
  • timeout — длительность отображения уведомления в миллисекундах.
  • progressBar включает или отключает индикатор времени.
  • animateInside управляет анимацией контента внутри уведомления.
  • onOpening и onClosing — коллбэки, полезные для логирования или триггеров других действий.

Расширение стандартных типов

Можно создавать пользовательские типы на основе существующих:

iziToast.successCustom = function(message, title){
    iziToast.show({
        title: title || 'Успех',
        message: message,
        color: '#28a745',
        icon: 'fa fa-check-circle',
        position: 'bottomRight',
        timeout: 4000
    });
};

iziToast.errorCustom = function(message, title){
    iziToast.show({
        title: title || 'Ошибка',
        message: message,
        color: '#dc3545',
        icon: 'fa fa-exclamation-circle',
        position: 'bottomLeft',
        timeout: 6000,
        overlay: true
    });
};

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

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

Использование пользовательских CSS-классов позволяет полностью контролировать внешний вид уведомления:

iziToast.show({
    title: 'Новость',
    message: 'Появилось новое сообщение',
    class: 'custom-toast-news',
    position: 'topRight'
});

CSS:

.custom-toast-news {
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: #fff;
    border-radius: 12px;
    font-weight: bold;
}
.custom-toast-news .iziToast-icon {
    font-size: 20px;
}

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

  • Менять фон и цвет текста.
  • Настраивать размеры, отступы и шрифты.
  • Подключать анимации CSS для плавного появления и исчезновения уведомлений.

Пользовательские шаблоны содержимого

iziToast поддерживает HTML-контент внутри уведомлений:

iziToast.show({
    title: 'Событие',
    message: '<strong>Важное сообщение:</strong> обновление завершено',
    position: 'topRight',
    close: false,
    overlay: true,
    timeout: false,
    layout: 2,
    balloon: true
});

Особенности:

  • layout регулирует структуру уведомления (1 или 2 колонки).
  • balloon создаёт визуальный эффект «пузыря».
  • Использование HTML позволяет добавлять ссылки, кнопки и стилизированные блоки.

Адаптивные уведомления

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

function notify(message, type){
    let settings = {
        message: message,
        position: 'topRight',
        timeout: 5000
    };

    switch(type){
        case 'success':
            settings.color = '#28a745';
            settings.icon = 'fa fa-check';
            break;
        case 'warning':
            settings.color = '#ffc107';
            settings.icon = 'fa fa-exclamation-triangle';
            break;
        case 'error':
            settings.color = '#dc3545';
            settings.icon = 'fa fa-times-circle';
            break;
        default:
            settings.color = '#17a2b8';
            settings.icon = 'fa fa-info-circle';
    }

    iziToast.show(settings);
}

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

Управление несколькими уведомлениями

Для приложений с большим количеством уведомлений важно управлять стеком уведомлений:

  • maxWidth ограничивает ширину.
  • zindex позволяет устанавливать порядок отображения.
  • layout и position помогают расположить уведомления компактно.
  • Можно закрывать все уведомления с помощью iziToast.destroy().

Пример:

iziToast.show({
    title: 'Событие',
    message: 'Это уведомление с максимальной шириной 400px',
    maxWidth: 400,
    position: 'topRight',
    timeout: 4000
});

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

Оглавление