Предупреждающие уведомления (warning)

Предупреждающие уведомления (warning) используются для информирования о потенциально нежелательных действиях, ошибках пользователя или ситуациях, требующих внимания, но не являющихся критическими. Они занимают промежуточное положение между информационными (info) и ошибочными (error) уведомлениями.

Основная задача — привлечь внимание без создания ощущения аварийности.

Базовое использование warning-уведомлений

В библиотеке iziToast тип уведомления задаётся через метод iziToast.warning():

iziToast.warning({
    title: 'Внимание',
    message: 'Заполните все обязательные поля'
});

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

используется стандартная жёлтая цветовая схема
иконка автоматически подбирается под тип warning
применяется стандартная анимация появления

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

Заголовок и сообщение

iziToast.warning({
    title: 'Предупреждение',
    message: 'Данные будут удалены без возможности восстановления'
});

title — краткое описание
message — уточнение или последствия

Позиционирование

iziToast.warning({
    title: 'Внимание',
    message: 'Нестабильное соединение',
    position: 'topRight'
});

Доступные позиции:

topRight
topLeft
topCenter
bottomRight
bottomLeft
bottomCenter

Время отображения

iziToast.warning({
    title: 'Внимание',
    message: 'Сессия скоро истечёт',
    timeout: 5000
});

значение указывается в миллисекундах
false отключает автоматическое закрытие

Визуальная кастомизация

Изменение цвета

iziToast.warning({
    title: 'Внимание',
    message: 'Лимит почти достигнут',
    color: 'orange'
});

Допустимые значения:

yellow (по умолчанию)
orange
red
blue
кастомный HEX или RGB

Иконка

iziToast.warning({
    title: 'Внимание',
    message: 'Подтвердите действие',
    icon: 'fas fa-exclamation-triangle'
});

можно использовать Font Awesome или кастомные классы
отключение иконки:

icon: false

Полоса прогресса

iziToast.warning({
    title: 'Внимание',
    message: 'Автоматическое закрытие через 5 секунд',
    progressBar: true
});

отображает оставшееся время жизни уведомления
отключается через progressBar: false

Интерактивные элементы

Кнопки действий

iziToast.warning({
    title: 'Удаление',
    message: 'Вы уверены?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            console.log('Подтверждено');
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['<button>Отмена</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

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

каждая кнопка — массив [HTML, callback]
instance.hide() закрывает уведомление
callback получает доступ к экземпляру уведомления

Закрытие по клику

iziToast.warning({
    title: 'Внимание',
    message: 'Нажмите для закрытия',
    closeOnClick: true
});

Закрытие по Esc

iziToast.warning({
    title: 'Внимание',
    message: 'Можно закрыть клавишей Esc',
    closeOnEscape: true
});

Поведение и анимации

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

iziToast.warning({
    title: 'Внимание',
    message: 'Плавная анимация',
    transitionIn: 'bounceInDown',
    transitionOut: 'fadeOutUp'
});

Приоритет и наложение

iziToast.warning({
    title: 'Внимание',
    message: 'Высокий приоритет',
    zindex: 9999
});

влияет на перекрытие других элементов интерфейса

Работа с событиями

Колбэки жизненного цикла

iziToast.warning({
    title: 'Внимание',
    message: 'Отслеживание событий',
    onOpening: function () {
        console.log('Открывается');
    },
    onOpened: function () {
        console.log('Открыто');
    },
    onClosing: function () {
        console.log('Закрывается');
    },
    onClosed: function () {
        console.log('Закрыто');
    }
});

Практические сценарии использования

Предупреждение о незаполненных полях

if (!formValid) {
    iziToast.warning({
        title: 'Ошибка ввода',
        message: 'Заполните обязательные поля'
    });
}

Подтверждение опасного действия

iziToast.warning({
    title: 'Удаление файла',
    message: 'Это действие необратимо',
    timeout: false,
    buttons: [
        ['<button>Удалить</button>', function (instance, toast) {
            deleteFile();
            instance.hide({}, toast);
        }],
        ['<button>Отмена</button>', function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

Уведомление о лимитах

iziToast.warning({
    title: 'Лимит',
    message: 'Осталось 10% доступного места',
    progressBarColor: 'red'
});

Кастомизация через CSS

Можно переопределять стили warning-уведомлений:

.iziToast.iziToast-color-yellow {
    background: #fff3cd;
    color: #856404;
}

Изменение иконки:

.iziToast .iziToast-icon {
    font-size: 20px;
}

Группировка и предотвращение дублирования

iziToast.warning({
    title: 'Внимание',
    message: 'Сообщение уже показано',
    id: 'warning-1'
});

id предотвращает повторное создание одинаковых уведомлений

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

iziToast.settings({
    maxWidth: 350,
    layout: 2,
    timeout: 4000
});

задаёт глобальные параметры
влияет на все последующие warning-уведомления

Асинхронные сценарии

fetch('/api/data')
    .then(response => {
        if (!response.ok) {
            iziToast.warning({
                title: 'Сервер',
                message: 'Ответ содержит предупреждение'
            });
        }
    });

Особенности UX при использовании warning

не злоупотреблять количеством
избегать длительного отображения без необходимости
использовать ясные формулировки
при критичных действиях добавлять кнопки подтверждения
визуально отличать от ошибок (error) и успеха (success)

Комбинирование с другими типами

iziToast.info({
    title: 'Начало',
    message: 'Процесс запущен'
});

iziToast.warning({
    title: 'Предупреждение',
    message: 'Процесс может занять больше времени'
});

iziToast.success({
    title: 'Готово',
    message: 'Процесс завершён'
});

Глобальная конфигурация warning-уведомлений

iziToast.settings({
    color: 'yellow',
    icon: 'fas fa-exclamation-circle',
    timeout: 3000
});

применяется ко всем типам, включая warning
может быть переопределена локально

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

HTML в сообщении

iziToast.warning({
    title: 'Внимание',
    message: '<b>Данные</b> будут перезаписаны',
    messageSize: '14'
});

RTL (справа налево)

iziToast.warning({
    title: 'تنبيه',
    message: 'تحقق من البيانات',
    rtl: true
});

Drag-to-dismiss

iziToast.warning({
    title: 'Внимание',
    message: 'Можно смахнуть',
    drag: true
});

Частые ошибки

использование warning вместо error для критических ситуаций
слишком короткий timeout для важной информации
отсутствие кнопок при необратимых действиях
перегруженность интерфейса уведомлениями
несогласованность стилей между типами уведомлений