Базовый синтаксис

Библиотека iziToast может использоваться без сборщиков — достаточно подключить её через CDN. Минимальный набор включает CSS и Jav * aScript:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast/dist/css/iziToast.min.css">
<script src="https://cdn.jsdelivr.net/npm/izitoast/dist/js/iziToast.min.js"></script>

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

Базовый вызов уведомления

Простейшее уведомление создаётся методом show. Он принимает объект с параметрами:

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

Ключевые свойства:

  • title — краткий заголовок
  • message — основной текст
  • timeout — время автозакрытия (в миллисекундах)
  • position — позиция на экране

Быстрые методы

Для типовых уведомлений предусмотрены сокращённые методы:

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

iziToast.error({
    title: 'Ошибка',
    message: 'Что-то пошло не так'
});

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

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

Эти методы автоматически задают стили (цвет, иконку).

Позиционирование

Параметр position определяет расположение уведомления:

iziToast.show({
    title: 'Пример',
    message: 'Центр сверху',
    position: 'topCenter'
});

Доступные значения:

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

Управление временем отображения

По умолчанию уведомления исчезают автоматически. Время задаётся через timeout:

iziToast.show({
    title: 'Авто закрытие',
    message: 'Через 5 секунд',
    timeout: 5000
});

Отключение автозакрытия:

iziToast.show({
    title: 'Ручное закрытие',
    message: 'Нужно закрыть вручную',
    timeout: false
});

Кнопки действий

В уведомление можно добавить кнопки:

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

Каждая кнопка задаётся массивом:

  1. HTML-код кнопки
  2. обработчик события

Обработчики событий

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

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

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

Основные параметры оформления:

iziToast.show({
    title: 'Кастомизация',
    message: 'Изменённый стиль',
    backgroundColor: '#333',
    titleColor: '#fff',
    messageColor: '#ddd',
    icon: 'ico-info',
    iconColor: '#00ffcc'
});

Иконки

Использование встроенных иконок или сторонних библиотек:

iziToast.show({
    title: 'Иконка',
    message: 'FontAwesome пример',
    icon: 'fa fa-check'
});

Анимации

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

iziToast.show({
    title: 'Анимация',
    message: 'С кастомной анимацией',
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOutRight'
});

Закрытие уведомлений

Закрытие конкретного уведомления:

iziToast.hide({}, document.querySelector('.iziToast'));

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

iziToast.destroy();

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

Можно задать настройки по умолчанию:

iziToast.settings({
    timeout: 3000,
    position: 'topRight',
    transitionIn: 'fadeInDown'
});

После этого все уведомления будут использовать эти параметры, если не указано иное.

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

iziToast.settings({
    timeout: 4000,
    position: 'bottomRight'
});

iziToast.success({
    title: 'Готово',
    message: 'Данные сохранены',
    buttons: [
        ['<button>Ок</button>', function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

Структура параметров

Объект конфигурации может включать:

  • текст: title, message
  • внешний вид: backgroundColor, icon
  • поведение: timeout, close, overlay
  • события: onOpened, onClosed
  • взаимодействие: buttons, drag

Особенности синтаксиса

  • Все параметры передаются одним объектом
  • Методы (success, error и др.) — обёртки над show
  • Обработчики получают instance и toast для управления
  • HTML допустим внутри message и кнопок

Такой синтаксис делает библиотеку компактной и гибкой при создании пользовательских уведомлений.

Оглавление