Миграция со старых версий

Изменения в API

В последних версиях iziToast произошли значительные изменения в синтаксисе вызова уведомлений и в настройках по умолчанию. Основное различие касается структуры объекта опций: многие параметры были переименованы, а устаревшие — удалены.

Пример старого вызова:

iziToast.show({
    title: 'Пример',
    message: 'Сообщение',
    timeout: 5000,
    position: 'topRight',
    color: 'blue'
});

В новых версиях корректный вызов выглядит так:

iziToast.show({
    title: 'Пример',
    message: 'Сообщение',
    timeout: 5000,
    position: 'topRight',
    theme: 'light',  // заменяет параметр color
    progressBarColor: '#ffffff'  // настраиваем цвет прогресс-бара
});
  • Параметр color больше не поддерживается. Для изменения визуальной темы используется theme, который принимает значения 'light' или 'dark'.
  • Настройка цвета прогресс-бара осуществляется через progressBarColor.

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

Ранее позиции задавались простыми строками 'topRight', 'bottomLeft' и т.д. Теперь поддерживаются более гибкие комбинации через объект position:

iziToast.show({
    title: 'Позиция',
    message: 'Тест',
    position: { x: 'right', y: 'top' }
});
  • x может принимать значения 'left', 'center', 'right'.
  • y может принимать значения 'top', 'bottom'.
  • Этот подход позволяет более точно контролировать положение уведомления и упростить адаптацию под разные разрешения экрана.

Работа с событиями

В новых версиях обработка событий стала более строгой. Старые колбеки onOpening, onClosing остались, но их сигнатура изменилась.

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

iziToast.show({
    title: 'События',
    message: 'Пример',
    onOpening: function(instance, toast) {
        console.log('Уведомление открывается', instance, toast);
    },
    onClosing: function(instance, toast, closedBy) {
        console.log('Уведомление закрывается', closedBy);
    }
});
  • Появился третий параметр closedBy, который позволяет узнать причину закрытия уведомления ('timeout', 'button', 'overlay').
  • Рекомендуется проверять все параметры колбэков для корректной работы логики закрытия и анимаций.

Изменения в стилях

Новые версии iziToast внедрили строгую систему CSS-переменных. Настройка внешнего вида через устаревшие классы теперь не поддерживается.

:root {
    --iziToast-color-light: #f0f0f0;
    --iziToast-color-dark: #2d2d2d;
    --iziToast-progressBar-color: #ff0000;
}
  • --iziToast-color-light и --iziToast-color-dark задают базовый фон уведомлений.
  • --iziToast-progressBar-color управляет цветом прогресс-бара.
  • Для кастомизации шрифтов и отступов используются классы iziToast-body, iziToast-title, iziToast-message.

Миграция глобальных настроек

Ранее глобальные настройки задавались через iziToast.settings({ ... }). Теперь рекомендуется использовать iziToast.defaults:

iziToast.defaults({
    timeout: 4000,
    position: 'topRight',
    theme: 'dark'
});
  • Глобальные параметры действуют на все уведомления, если не переопределены в конкретном вызове.
  • Это позволяет унифицировать стиль и поведение уведомлений без дублирования кода.

Устаревшие методы и их замена

  • iziToast.success(), iziToast.error() и другие шорткаты остались, но теперь они являются обертками над iziToast.show() с предустановленными параметрами theme и icon.
  • Рекомендуется использовать iziToast.show() для большей гибкости и полной совместимости с новыми версиями.

Работа с динамическим контентом

В новых версиях поддерживается передача HTML-контента напрямую через параметр message с использованием шаблонных строк:

iziToast.show({
    title: 'HTML',
    message: `<b>Жирный текст</b> и <i>курсив</i>`,
    timeout: 6000
});
  • Поддерживается вставка ссылок, изображений и кастомных элементов.
  • Следует внимательно проверять источник HTML, чтобы избежать XSS-уязвимостей.

Советы по плавной миграции

  1. Начинать с обновления глобальных настроек через iziToast.defaults.
  2. Проверить все устаревшие параметры (color, position как строка, старые колбеки) и заменить их на новые.
  3. Протестировать уведомления с динамическим контентом, особенно с HTML.
  4. Убедиться, что кастомные стили через CSS переменные правильно применяются.
  5. При необходимости переписать обработку событий с учетом нового параметра closedBy.

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

Оглавление