Что такое iziToast

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

Основные характеристики:

  • Легковесность: минимальный вес библиотеки позволяет интегрировать её без существенного влияния на производительность страницы.
  • Гибкость настройки: можно изменять позицию, время отображения, анимации, цвета и иконки.
  • Асинхронность: уведомления не блокируют выполнение кода и могут отображаться параллельно.
  • Многообразие событий: поддержка событий onOpening, onOpened, onClosing, onClosed для контроля поведения уведомлений.

Подключение библиотеки

Для работы с iziToast необходимо подключить CSS и JS файлы библиотеки. Наиболее распространённые способы:

После подключения файлов библиотека становится доступной через глобальный объект iziToast.

Создание простого уведомления

Минимальный пример уведомления:

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

Пояснения:

  • title — заголовок уведомления.
  • message — основной текст сообщения.

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

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена успешно'
});

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

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

iziToast.info({
    title: 'Информация',
    message: 'Это информационное сообщение'
});

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

iziToast позволяет изменять позицию сообщений на экране через параметр position. Возможные значения:

  • topRight
  • topLeft
  • topCenter
  • bottomRight
  • bottomLeft
  • bottomCenter

Пример:

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

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

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

iziToast.show({
    title: 'Кастомное уведомление',
    message: 'Цвет и иконка изменены',
    color: 'purple', // Цвет фона
    icon: 'fa fa-star', // Использование иконок FontAwesome
    timeout: 5000, // Время показа в миллисекундах
    progressBar: true // Показывать индикатор времени
});

Параметр timeout управляет временем автоматического закрытия уведомления. Установка timeout: false делает уведомление постоянным до закрытия пользователем.

Анимации появления и исчезновения

iziToast поддерживает несколько типов анимаций:

iziToast.show({
    title: 'Анимация',
    message: 'Пример анимации',
    transitionIn: 'fadeInUp', // Анимация появления
    transitionOut: 'fadeOutDown' // Анимация закрытия
});

Список основных анимаций:

  • fadeIn, fadeOut
  • fadeInUp, fadeOutUp
  • fadeInDown, fadeOutDown
  • flipInX, flipOutX

Использование событий

События позволяют управлять поведением уведомлений на всех этапах жизненного цикла:

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

Параметр closedBy возвращает причину закрытия: timeout, button, overlay или method.

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

iziToast автоматически управляет несколькими уведомлениями и располагает их с отступами. Можно задавать максимальное количество видимых уведомлений:

iziToast.settings({
    maxOpened: 3,
    resetOnHover: true
});

Параметр resetOnHover позволяет сбрасывать таймер автоматического закрытия при наведении мыши на уведомление.

Примеры кастомных кнопок

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

iziToast.show({
    title: 'Действие',
    message: 'Нажмите кнопку для действия',
    buttons: [
        ['', function (instance, toast) {
            console.log('Нажата кнопка Принять');
            instance.hide({transitionOut: 'fadeOut'}, toast);
        }],
        ['', function (instance, toast) {
            console.log('Нажата кнопка Отклонить');
            instance.hide({transitionOut: 'fadeOut'}, toast);
        }]
    ]
});

Поддержка тем и кастомных стилей

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

iziToast.settings({
    theme: 'dark', // Поддерживаются 'light' и 'dark'
    titleColor: '#FFD700',
    messageColor: '#FFFFFF',
    iconColor: '#FFD700'
});

Можно задавать индивидуальные стили через CSS для класса .iziToast.

Интеграция с современными фреймворками

iziToast легко использовать в сочетании с React, Vue или Angular. Для React можно обернуть вызовы iziToast в сервис или хук, для Vue — в глобальный метод через provide/inject или плагин.

Оглавление