Базовые позиции

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

Через CDN:

Через npm:

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

После подключения iziToast готов к использованию. Вызов уведомлений осуществляется через функцию iziToast.show() или готовые методы типа iziToast.success(), iziToast.error() и т.д.

Основной метод iziToast.show

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

iziToast.show({
    title: 'Заголовок',
    message: 'Текст уведомления',
    position: 'topRight',  // Положение на экране
    timeout: 5000,         // Автоматическое закрытие через 5 секунд
    close: true            // Отображение кнопки закрытия
});

Ключевые параметры объекта:

  • title — заголовок уведомления.
  • message — основной текст.
  • position — положение: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.
  • timeout — время в миллисекундах до автоматического закрытия.
  • close — отображение кнопки закрытия.
  • theme — тема оформления: light (по умолчанию), dark.
  • color — пользовательский цвет фона уведомления.
  • icon — иконка (строка с именем класса, например fa fa-check или путь к SVG).
  • progressBar — отображение индикатора прогресса (true/false).
  • overlay — затемнение фона (true/false).

Готовые типы уведомлений

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

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

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

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

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

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

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

iziToast.show({
    title: 'Позиция',
    message: 'Нижний левый угол',
    position: 'bottomLeft'
});

Настройка времени отображения

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

iziToast.info({
    title: 'Время',
    message: 'Уведомление будет закрыто вручную',
    timeout: 0
});

pauseOnHover позволяет при наведении мыши заморозить таймер закрытия, что удобно для длинных сообщений:

iziToast.info({
    title: 'Интерактивно',
    message: 'Наведи мышь, чтобы задержать закрытие',
    pauseOnHover: true
});

Кнопки и интерактивность

Для уведомлений можно добавлять кнопки, которые выполняют определённые действия:

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);
        }]
    ]
});

Каждая кнопка задаётся массивом из HTML-строки и функции-обработчика. instance.hide() позволяет закрывать конкретное уведомление с выбранной анимацией.

Темы и кастомизация

iziToast поддерживает светлую (light) и тёмную (dark) темы. Можно задавать тему глобально:

iziToast.settings({
    theme: 'dark',
    timeout: 4000,
    progressBar: true
});

Для отдельного уведомления можно переопределить:

iziToast.success({
    title: 'Кастом',
    message: 'Тёмная тема',
    theme: 'dark'
});

Примеры сочетания параметров

iziToast.show({
    title: 'Полная настройка',
    message: 'Пользовательский цвет, позиция, кнопки и таймаут',
    color: 'green',
    icon: 'fa fa-check-circle',
    position: 'topCenter',
    timeout: 7000,
    close: true,
    overlay: true,
    buttons: [
        ['', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

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

Оглавление