Полный список методов

iziToast.show(options) Основной метод для создания уведомлений. Параметр options — объект с настройками уведомления. Ключевые свойства:

  • title — заголовок уведомления.
  • message — текст уведомления.
  • timeout — время отображения (в миллисекундах). Значение false отключает автозакрытие.
  • position — позиция на экране ('topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'topCenter', 'bottomCenter', 'center').
  • theme — тема уведомления ('light' или 'dark').
  • color — цвет фона, может быть любым CSS-значением.
  • icon — иконка, можно указать класс шрифта или путь к изображению.
  • pauseOnHover — при наведении мыши таймер пауза (true/false).
  • close — отображение кнопки закрытия (true/false).
  • progressBar — отображение прогресс-бара (true/false).
  • layout — количество строк и расположение элементов (1, 2, 3).

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

iziToast.show({
    title: 'Успех',
    message: 'Данные успешно сохранены',
    position: 'topRight',
    timeout: 5000,
    theme: 'light'
});

Специальные методы для уведомлений

iziToast.success(options) Создает уведомление с предустановленной зелёной темой и иконкой успеха. Используется для подтверждения успешных действий.

iziToast.success({
    title: 'Готово',
    message: 'Файл загружен',
    position: 'bottomRight'
});

iziToast.error(options) Уведомление для ошибок с красной тематикой. Применяется для отображения сообщений о неудачных операциях.

iziToast.error({
    title: 'Ошибка',
    message: 'Не удалось сохранить данные'
});

iziToast.warning(options) Желтое уведомление, предупреждающее о возможных проблемах. Отлично подходит для валидации форм.

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

iziToast.info(options) Синее уведомление для информационных сообщений.

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

Методы управления уведомлениями

iziToast.hide([target, options]) Закрывает одно или несколько уведомлений. Параметр target — элемент DOM уведомления. Параметр options позволяет настроить анимацию закрытия.

const toast = iziToast.show({title: 'Пример', message: 'Закроется через 3 сек'});
setTimeout(() => {
    iziToast.hide(toast);
}, 3000);

iziToast.destroy() Удаляет все уведомления с экрана сразу. Полезно для очистки интерфейса перед показом новых уведомлений или при переходе на другую страницу.

iziToast.destroy();

iziToast.settings(options) Позволяет задать глобальные настройки для всех уведомлений. Например, изменить позицию по умолчанию, тему или длительность.

iziToast.settings({
    timeout: 4000,
    position: 'topCenter',
    theme: 'dark'
});

Настройка кнопок и событий

buttons Позволяет добавлять кастомные кнопки к уведомлению. Каждый элемент массива — массив из двух элементов: первый — текст кнопки, второй — функция-обработчик.

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

События (onOpening, onClosing, onClosed) Позволяют отслеживать жизненный цикл уведомления:

  • onOpening — вызывается в момент начала открытия.
  • onClosing — вызывается при начале закрытия.
  • onClosed — вызывается после полного закрытия уведомления.
iziToast.show({
    title: 'Событие',
    message: 'Отслеживание жизненного цикла',
    onOpening: function() { console.log('Открывается'); },
    onClosing: function() { console.log('Закрывается'); },
    onClosed: function() { console.log('Закрыто'); }
});

Анимации и эффекты

transitionIn / transitionOut Позволяют задать CSS-анимацию для появления и скрытия уведомлений. Возможные значения: 'fadeIn', 'fadeOut', 'slideInLeft', 'slideInRight', 'bounceIn', 'flipInX' и другие.

iziToast.show({
    title: 'Анимация',
    message: 'Использование transitionIn и transitionOut',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX'
});

animateInside Включает или отключает анимацию элементов внутри уведомления.

Дополнительные методы

  • iziToast.info(options), iziToast.success(options), iziToast.warning(options), iziToast.error(options) — сокращенные методы для конкретных типов уведомлений.
  • iziToast.show() — универсальный метод с полной кастомизацией.
  • iziToast.hide() — закрытие конкретного уведомления.
  • iziToast.destroy() — уничтожение всех уведомлений.
  • iziToast.settings() — глобальные настройки библиотеки.

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

Оглавление