Системные алерты

Библиотека iziToast предназначена для создания уведомлений в браузере с гибкой настройкой внешнего вида, поведения и анимации. Уведомления могут быть информационными, предупреждающими, успешными или ошибочными, с возможностью позиционирования в различных областях экрана и тонкой кастомизацией.

Создание уведомления

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

iziToast.show({
    title: 'Заголовок',
    message: 'Сообщение уведомления'
});

Ключевые параметры метода show:

  • title – заголовок уведомления;
  • message – основной текст;
  • theme – стиль уведомления (light, dark);
  • icon – иконка, поддерживаются как CSS-классы, так и изображения;
  • timeout – время автоматического закрытия в миллисекундах (по умолчанию 5000);
  • position – позиция на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).

Предопределённые типы уведомлений

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

iziToast.success({ title: 'Успех', message: 'Операция выполнена' });
iziToast.error({ title: 'Ошибка', message: 'Произошла ошибка' });
iziToast.warning({ title: 'Внимание', message: 'Проверьте данные' });
iziToast.info({ title: 'Информация', message: 'Дополнительные сведения' });

Каждый метод автоматически устанавливает цветовую схему, иконку и иногда длительность отображения. Можно переопределить все параметры.

Позиционирование уведомлений

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

  • topRight – верхний правый угол (по умолчанию);
  • topLeft – верхний левый угол;
  • bottomRight – нижний правый угол;
  • bottomLeft – нижний левый угол;
  • topCenter – верхний центр;
  • bottomCenter – нижний центр.

Пример:

iziToast.show({
    title: 'Системное уведомление',
    message: 'Содержимое уведомления',
    position: 'bottomLeft'
});

Позиция задаётся как строка, либо можно использовать кастомные координаты через target и targetFirst.

Настройка анимации

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

  • transitionIn – анимация появления (fadeInDown, bounceInLeft, flipInX);
  • transitionOut – анимация исчезновения (fadeOutUp, flipOutX);
  • transitionInMobile и transitionOutMobile – отдельные анимации для мобильных устройств.

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

iziToast.show({
    title: 'Анимация',
    message: 'Появление и исчезновение с кастомными эффектами',
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOutUp'
});

Встроенные кнопки и события

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

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

События уведомлений:

  • onOpening – перед показом уведомления;
  • onOpened – после появления;
  • onClosing – перед скрытием;
  • onClosed – после скрытия.

Пример регистрации события:

iziToast.show({
    title: 'Событие',
    message: 'Пример обработки',
    onClosing: function(instance, toast, closedBy){
        console.log('Закрыто уведомление, причина:', closedBy);
    }
});

Глобальные настройки

Для удобства можно задать параметры по умолчанию для всех уведомлений:

iziToast.settings({
    timeout: 4000,
    position: 'topRight',
    theme: 'light',
    progressBar: true,
    close: true
});

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

Пользовательские стили

Можно полностью контролировать стили уведомлений через CSS, включая цвета, размеры, шрифты, тени и анимации. Все элементы уведомления имеют классы .iziToast, .iziToast-title, .iziToast-message, .iziToast-icon, .iziToast-close.

.iziToast {
    border-radius: 10px;
    font-family: 'Arial', sans-serif;
}
.iziToast-title {
    font-weight: bold;
    font-size: 16px;
}

Взаимодействие с DOM

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

  • iziToast.show() – показать уведомление;
  • iziToast.hide() – скрыть конкретное уведомление;
  • iziToast.destroy() – удалить все уведомления из DOM.

Пример скрытия всех уведомлений:

iziToast.destroy();

Использование с модулями

Библиотека поддерживает работу через ES6 import:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

iziToast.success({ title: 'Модуль', message: 'Уведомление через import' });

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

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

Оглавление