Подписка на рассылку

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

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

После подключения можно сразу вызывать функции библиотеки. Для работы с современными сборщиками (Webpack, Vite, Parcel) iziToast можно установить через npm:

npm install izitoast

И импортировать в коде:

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

Основные методы

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

  • title — заголовок уведомления.
  • message — текст сообщения.
  • position — позиция на экране (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • timeout — время автоматического закрытия в миллисекундах.
  • theme — тема уведомления (light или dark).
  • color — цветовая схема (green, red, blue и другие).

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

iziToast.show({
    title: 'Подписка активирована',
    message: 'Вы успешно подписались на рассылку',
    position: 'topRight',
    timeout: 5000
});

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

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

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

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

iziToast.success({
    title: 'Успех',
    message: 'Подписка на рассылку оформлена!',
    position: 'topRight',
    timeout: 4000
});

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

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

iziToast.show({
    title: 'Подписка',
    message: 'Хотите получить рассылку?',
    position: 'topRight',
    buttons: [
        ['<button>Подтвердить</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            console.log('Подписка подтверждена');
        }],
        ['<button>Отмена</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            console.log('Подписка отменена');
        }]
    ]
});

Каждая кнопка задается массивом [html, callback], где callback получает instance и объект toast.

Позиционирование и адаптивность

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

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

Уведомления автоматически адаптируются под ширину экрана. Можно изменить максимальную ширину с помощью maxWidth:

iziToast.show({
    title: 'Новость',
    message: 'Подписка на рассылку активна',
    position: 'topRight',
    maxWidth: 400
});

Настройка анимации и времени жизни

Плавность появления и скрытия уведомлений задается через transitionIn и transitionOut:

  • fadeIn, fadeOut
  • slideInRight, slideOutRight
  • bounceInLeft, bounceOutLeft

Время автоматического закрытия определяется параметром timeout. Для уведомлений, которые не должны исчезать автоматически, используется timeout: 0.

iziToast.show({
    title: 'Подписка',
    message: 'Пожалуйста, подтвердите адрес электронной почты',
    position: 'topRight',
    timeout: 0,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});

Встроенные события

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

  • onOpening — перед отображением.
  • onOpened — после отображения.
  • onClosing — перед скрытием.
  • onClosed — после скрытия.

Пример для подписки:

iziToast.show({
    title: 'Подписка',
    message: 'Вы успешно подписались',
    onOpening: function() {
        console.log('Уведомление открывается');
    },
    onClosed: function() {
        console.log('Уведомление закрыто');
    }
});

Глобальная конфигурация

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

iziToast.settings({
    timeout: 5000,
    position: 'topRight',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    theme: 'light',
    color: 'blue'
});

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

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

Пример обработки формы подписки с отображением iziToast:

document.querySelector('#subscribeForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = this.querySelector('input[name="email"]').value;

    if (email) {
        iziToast.success({
            title: 'Успех',
            message: `Подписка для ${email} активирована`,
            position: 'topRight'
        });
        this.reset();
    } else {
        iziToast.error({
            title: 'Ошибка',
            message: 'Введите корректный email',
            position: 'topRight'
        });
    }
});

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

Оглавление