Уведомления об ошибках (error)

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

Базовый синтаксис создания уведомления об ошибке:

iziToast.error({
    title: 'Ошибка!',
    message: 'Произошла непредвиденная ошибка при сохранении данных',
});
  • title — заголовок уведомления. Обычно кратко обозначает тип события, например «Ошибка» или «Внимание».
  • message — основной текст уведомления. Желательно писать информативно, чтобы пользователь понял причину.
  • timeout — время показа уведомления в миллисекундах. По умолчанию 5000.

Пример с дополнительными параметрами:

iziToast.error({
    title: 'Ошибка загрузки',
    message: 'Файл не был загружен. Проверьте соединение с интернетом.',
    position: 'topRight',
    timeout: 7000,
    close: true,
    overlay: true,
});
  • position — позиция уведомления на экране. Возможные значения: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.
  • close — добавляет кнопку закрытия уведомления. Полезно для ошибок, требующих явного подтверждения пользователем.
  • overlay — затемнение фона, привлекает внимание к критическому сообщению.

Настройка внешнего вида уведомлений

iziToast предоставляет гибкие возможности для кастомизации:

  • theme — определяет цветовую тему. Для ошибок обычно используют dark или пользовательскую стилизацию.
  • color — задаёт основной цвет уведомления. Например, красный для критических ошибок:
iziToast.error({
    title: 'Ошибка сервера',
    message: 'Не удалось получить данные с сервера',
    color: 'red',
});
  • icon — позволяет добавлять иконку. Можно использовать встроенные иконки ('icon: "fa fa-times"') или кастомные SVG/картинки.

Пример с иконкой и кастомным цветом:

iziToast.error({
    title: 'Ошибка авторизации',
    message: 'Неверный логин или пароль',
    color: '#FF4B4B',
    icon: 'fa fa-exclamation-triangle',
});

Продвинутые возможности

  1. Callback-функции — позволяют выполнять действия после появления или закрытия уведомления:
iziToast.error({
    title: 'Ошибка сохранения',
    message: 'Попробуйте снова через минуту',
    onOpening: function(instance, toast){
        console.log('Уведомление открылось');
    },
    onClosing: function(instance, toast, closedBy){
        console.log('Уведомление закрыто', closedBy);
    }
});
  • onOpening — срабатывает при отображении уведомления.
  • onClosing — срабатывает при закрытии, closedBy указывает причину: 'timeout', 'button', 'overlay', 'manual'.
  1. Массовое создание ошибок — удобно для отображения нескольких ошибок одновременно:
const errors = [
    'Имя пользователя не может быть пустым',
    'Пароль слишком короткий',
    'Email указан некорректно'
];

errors.forEach(err => {
    iziToast.error({
        title: 'Ошибка',
        message: err,
        position: 'topRight',
        timeout: 4000
    });
});
  1. Интерактивные кнопки — можно добавлять действия прямо в уведомление:
iziToast.error({
    title: 'Ошибка сохранения',
    message: 'Не удалось сохранить изменения',
    buttons: [
        ['<button>Повторить</button>', function (instance, toast) {
            console.log('Повторная попытка сохранения');
            instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
        }],
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
        }]
    ]
});

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

  • stack — по умолчанию уведомления накладываются друг на друга. Можно задать maxVisible:
iziToast.settings({
    maxVisible: 3,
    resetOnHover: true
});

  • resetOnHover — если true, таймер исчезновения уведомления сбрасывается при наведении курсора. Полезно для длительных сообщений об ошибках.

  • transitionIn / transitionOut — определяют анимации появления и исчезновения:

iziToast.error({
    title: 'Ошибка сети',
    message: 'Сервер недоступен',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});

Локализация и мультиязычность

iziToast позволяет выводить уведомления на любом языке, используя динамические строки:

const messages = {
    ru: 'Произошла ошибка при загрузке данных',
    en: 'Failed to load data'
};

iziToast.error({
    title: 'Ошибка',
    message: messages['ru']
});

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

Резюме ключевых особенностей error-уведомлений

  • title и message — обязательные для ясного обозначения ошибки.
  • Цвет, иконка и overlay помогают визуально выделять критические ошибки.
  • Колбэки (onOpening, onClosing) и кнопки делают уведомление интерактивным.
  • Управление стеком уведомлений и анимациями повышает UX при множественных ошибках.
  • Локализация и динамические сообщения позволяют использовать iziToast в многоязычных приложениях.

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

Оглавление