Стратегии постепенного обновления

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

После подключения можно вызывать уведомления с помощью функции iziToast.show(). Базовая структура:

iziToast.show({
    title: 'Заголовок',
    message: 'Сообщение',
    position: 'topRight'
});

title и message — ключевые параметры. Позиция уведомления указывается через position, доступные значения: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center.

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

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

  • Success: iziToast.success({ title: 'Успех', message: 'Операция выполнена' })
  • Error: iziToast.error({ title: 'Ошибка', message: 'Что-то пошло не так' })
  • Warning: iziToast.warning({ title: 'Внимание', message: 'Проверьте данные' })
  • Info: iziToast.info({ title: 'Информация', message: 'Обновление доступно' })

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

Параметры конфигурации

Позиция и размеры

  • position — определяет угол или центр экрана для уведомления.
  • timeout — время в миллисекундах до автоматического закрытия; значение 0 делает уведомление постоянным.
  • maxWidth — максимальная ширина уведомления, по умолчанию 600px.

Анимации

  • animateInside — включает анимацию для внутреннего содержимого.
  • transitionIn / transitionOut — тип анимации появления и скрытия (fadeIn, fadeOut, slideInLeft, slideOutRight и др.).

Кастомизация элементов

  • icon — путь к иконке или HTML-разметка.
  • color — основной цвет фона уведомления.
  • iconColor — цвет иконки.
  • theme — light, dark или iziToast для стандартного стиля.

Стратегии постепенного обновления интерфейса

1. Обновление отдельных элементов iziToast позволяет обновлять уведомления без их полного закрытия. Для этого используется метод update, который применяет новые параметры к уже существующему уведомлению.

let toastId = iziToast.show({
    title: 'Загрузка',
    message: 'Файл 0% загружен',
    timeout: false,
});

setTimeout(() => {
    iziToast.update({
        id: toastId,
        message: 'Файл 50% загружен'
    });
}, 2000);

setTimeout(() => {
    iziToast.update({
        id: toastId,
        message: 'Файл загружен',
        color: 'green',
    });
}, 4000);

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

iziToast.show({
    title: 'Шаг 1',
    message: 'Инициализация'
});

setTimeout(() => {
    iziToast.show({
        title: 'Шаг 2',
        message: 'Обработка данных'
    });
}, 1500);

setTimeout(() => {
    iziToast.show({
        title: 'Шаг 3',
        message: 'Завершение'
    });
}, 3000);

3. Прогресс-бар для постепенного обновления Уведомления с прогресс-баром позволяют визуально отследить процесс. Параметры progressBar и timeout задают вид и скорость прогресса:

iziToast.show({
    title: 'Загрузка',
    message: 'Подождите',
    progressBar: true,
    timeout: 5000,
    onOpening: function(instance) {
        let width = 0;
        let interval = setInterval(() => {
            width += 10;
            instance.progress(width / 100);
            if (width >= 100) clearInterval(interval);
        }, 500);
    }
});

Использование событий для динамических обновлений

iziToast поддерживает события onOpening, onOpened, onClosing, onClosed, которые позволяют реагировать на каждый этап жизни уведомления. Это критично для постепенного обновления, когда требуется синхронизация с реальными процессами, например загрузкой файлов или асинхронными запросами.

iziToast.show({
    title: 'Загрузка',
    message: 'Подключение к серверу',
    timeout: false,
    onOpened: () => console.log('Уведомление открыто'),
    onClosing: () => console.log('Начало закрытия'),
});

Эти события позволяют интегрировать iziToast с любыми процессами интерфейса, обеспечивая плавное, пошаговое информирование пользователя без резких изменений и перегрузки экрана.

Пользовательские шаблоны и постепенное обновление контента

iziToast допускает вставку HTML-контента через параметр message и использование пользовательских шаблонов через template. Это позволяет создавать сложные уведомления с прогресс-барами, динамическими кнопками и интерактивными элементами.

iziToast.show({
    title: 'Статус',
    message: `
Загрузка: 0%
`,
    timeout: false,
    onOpening: function(instance) {
        let progress = 0;
        let interval = setInterval(() => {
            progress += 10;
            document.getElementById('progress').innerText = progress + '%';
            if (progress >= 100) clearInterval(interval);
        }, 500);
    }
});

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

Оглавление