Первое уведомление

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

<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.

Простейший вызов уведомления выполняется с помощью метода iziToast.show():

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

Основные параметры метода show

Метод show позволяет гибко настраивать уведомления. Основные параметры:

  • title — заголовок уведомления.
  • message — текст уведомления.
  • position — расположение на экране ('topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'topCenter', 'bottomCenter').
  • timeout — время показа уведомления в миллисекундах. Если указано false, уведомление останется до закрытия пользователем.
  • theme — тема уведомления ('light', 'dark').
  • color — цветовая подсветка уведомления ('blue', 'red', 'green', 'orange' и др.).
  • icon — иконка в формате CSS-класса или URL.
  • progressBar — отображение индикатора прогресса (true или false).

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

iziToast.show({
    title: 'Успех!',
    message: 'Данные успешно сохранены',
    position: 'topRight',
    timeout: 5000,
    color: 'green',
    icon: 'fa fa-check',
    progressBar: true
});

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

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

  • iziToast.success() — уведомление об успешной операции.
  • iziToast.error() — уведомление об ошибке.
  • iziToast.info() — информационное уведомление.
  • iziToast.warning() — предупреждение.

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

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

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

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

iziToast поддерживает различные позиции для уведомлений:

  • topRight — верхний правый угол.
  • topLeft — верхний левый угол.
  • bottomRight — нижний правый угол.
  • bottomLeft — нижний левый угол.
  • topCenter — верхний центр.
  • bottomCenter — нижний центр.

Пример уведомления в верхнем центре:

iziToast.info({
    title: 'Информация',
    message: 'Событие произошло',
    position: 'topCenter'
});

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

Кастомизация и стилизация

Каждое уведомление можно детально настроить:

  • theme — 'light' или 'dark'.
  • color — цвет уведомления.
  • icon — добавление кастомной иконки.
  • transitionIn / transitionOut — эффекты появления и исчезновения ('fadeIn', 'fadeOut', 'bounceInLeft' и др.).
  • layout — способ отображения контента внутри уведомления (например, выравнивание текста и иконки).

Пример с кастомной анимацией:

iziToast.show({
    title: 'Внимание',
    message: 'Обновление доступно',
    color: 'orange',
    icon: 'fa fa-exclamation-triangle',
    position: 'topRight',
    transitionIn: 'fadeInLeft',
    transitionOut: 'fadeOutRight'
});

Взаимодействие с пользователем

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

  • buttons — массив кнопок с обработчиками событий.
  • onOpening / onOpened / onClosing / onClosed — функции обратного вызова на разных этапах жизни уведомления.

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

iziToast.show({
    title: 'Подтвердите действие',
    message: 'Вы уверены, что хотите удалить файл?',
    position: 'bottomLeft',
    timeout: false,
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            console.log('Файл удалён');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

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

iziToast автоматически группирует уведомления по позициям. Для более тонкой настройки:

  • maxWidth — максимальная ширина уведомления.
  • zindex — приоритет слоя на странице.
  • stack — контроль над стеком уведомлений.

Пример ограничения ширины:

iziToast.show({
    title: 'Сообщение',
    message: 'Длинное уведомление с ограниченной шириной',
    position: 'topRight',
    maxWidth: 350
});

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

Оглавление