Composition API

iziToast — это легковесная библиотека для отображения уведомлений на веб-страницах. Она обеспечивает гибкость в настройке и позволяет создавать уведомления различных типов: успех, ошибка, предупреждение, информация и кастомные. В основе работы лежит объектная структура, где каждое уведомление создается через функцию iziToast.show() или специализированные методы вроде iziToast.success().

iziToast.show({
    title: 'Пример',
    message: 'Это уведомление iziToast',
    position: 'topRight',
    timeout: 5000
});

Ключевые параметры уведомления:

  • title — заголовок уведомления.
  • message — основной текст уведомления.
  • position — позиция на экране: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.
  • timeout — время отображения в миллисекундах.
  • color — цветовая схема уведомления.
  • icon — иконка уведомления, может быть строкой с названием иконки или HTML.
  • close — отображение кнопки закрытия.

Методы для создания уведомлений

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

iziToast.success({
    title: 'Успех',
    message: 'Действие выполнено успешно'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка'
});

iziToast.warning({
    title: 'Внимание',
    message: 'Необходимо проверить данные'
});

iziToast.info({
    title: 'Информация',
    message: 'Это информационное уведомление'
});

Эти методы являются удобными обертками над универсальным iziToast.show() и автоматически подбирают стандартные цвета и иконки для каждого типа уведомления.

Настройка позиции и стиля

Положение уведомлений на странице задается через параметр position. Возможные значения:

  • topRight, topLeft — уведомления появляются в верхнем углу.
  • bottomRight, bottomLeft — уведомления отображаются в нижнем углу.
  • topCenter, bottomCenter — уведомления выравниваются по центру сверху или снизу.

Для кастомизации внешнего вида можно использовать CSS-переменные и собственные стили:

.iziToast {
    font-family: 'Arial, sans-serif';
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Или через параметры при создании уведомления:

iziToast.show({
    title: 'Кастом',
    message: 'С собственным цветом',
    color: 'green',
    icon: 'fa fa-check-circle',
    timeout: 4000
});

Работа с событиями уведомлений

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

  • onOpening — срабатывает перед появлением уведомления.
  • onOpened — после того как уведомление полностью отобразилось.
  • onClosing — перед закрытием уведомления.
  • onClosed — после закрытия уведомления.

Пример использования событий:

iziToast.show({
    title: 'Событие',
    message: 'Пример использования событий',
    onOpening: function(instance, toast){
        console.log('Открывается уведомление');
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление закрыто', closedBy);
    }
});

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

Библиотека автоматически управляет очередью уведомлений. Для контроля можно использовать параметр maxWidth и overlay:

iziToast.show({
    title: 'Overlay',
    message: 'Уведомление с затемнением фона',
    overlay: true,
    position: 'center'
});

Применение с динамическими данными

Уведомления можно интегрировать с асинхронными процессами:

fetch('/api/data')
    .then(response => response.json())
    .then(data => {
        iziToast.success({
            title: 'Данные получены',
            message: `Получено ${data.length} элементов`
        });
    })
    .catch(error => {
        iziToast.error({
            title: 'Ошибка',
            message: error.message
        });
    });

Кастомизация кнопок и действий

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

iziToast.show({
    title: 'Подтверждение',
    message: 'Вы хотите продолжить?',
    buttons: [
        ['', function (instance, toast) {
            console.log('Подтверждено');
            instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
        }],
        ['', function (instance, toast) {
            console.log('Отменено');
            instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
        }]
    ]
});

Управление существующими уведомлениями

iziToast предоставляет методы для удаления уведомлений:

  • iziToast.hide() — скрыть уведомление по идентификатору.
  • iziToast.destroy() — удалить все уведомления на странице.
var toastId = iziToast.show({message: 'Временное уведомление'});
setTimeout(() => iziToast.hide({}, toastId), 3000);
Оглавление