Уведомления об успехе (success)

Уведомления типа success используются для отображения успешного завершения действий: сохранения данных, отправки формы, выполнения запроса, авторизации и других операций. Их основная задача — быстро и ненавязчиво подтвердить корректность выполненного действия, не отвлекая пользователя от дальнейшей работы.

В библиотеке iziToast такие уведомления визуально выделяются с помощью цветовой схемы (обычно зелёной), иконки и анимации появления.

Базовое использование

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

iziToast.success({
    title: 'OK',
    message: 'Данные успешно сохранены'
});

Ключевые параметры:

  • title — заголовок уведомления
  • message — основной текст сообщения

Визуальные особенности success-уведомлений

Уведомления типа success имеют следующие характеристики:

  • Цветовая палитра — оттенки зелёного
  • Иконка по умолчанию — галочка (check)
  • Плавная анимация появления и исчезновения
  • Поддержка темной и светлой темы

Настройка внешнего вида:

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена',
    backgroundColor: '#4CAF50',
    icon: 'fa fa-check',
    iconColor: '#fff'
});

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

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

Доступные варианты:

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

Пример:

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

Время отображения

Параметр timeout определяет, сколько миллисекунд уведомление будет отображаться:

iziToast.success({
    title: 'Сохранено',
    message: 'Изменения применены',
    timeout: 3000
});

Особенности:

  • timeout: 0 — уведомление не исчезает автоматически
  • значение по умолчанию — 5000 мс

Прогресс-бар

В уведомлениях типа success можно включить визуальный индикатор времени:

iziToast.success({
    title: 'Успех',
    message: 'Операция завершена',
    progressBar: true
});

Дополнительные настройки:

iziToast.success({
    progressBarColor: '#ffffff'
});

Закрытие уведомлений

Управление закрытием:

iziToast.success({
    close: true,
    closeOnEscape: true,
    closeOnClick: true
});

Параметры:

  • close — отображение кнопки закрытия
  • closeOnEscape — закрытие по клавише ESC
  • closeOnClick — закрытие по клику

Добавление кнопок действий

Success-уведомления могут содержать интерактивные кнопки:

iziToast.success({
    title: 'Готово',
    message: 'Файл успешно загружен',
    buttons: [
        ['<button>Открыть</button>', function (instance, toast) {
            console.log('Открытие файла');
            instance.hide({}, toast);
        }, true]
    ]
});

Структура кнопки:

[
  HTML_разметка,
  callback,
  focus
]

Анимации

iziToast поддерживает кастомизацию анимации:

iziToast.success({
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});

Популярные значения:

  • fadeIn
  • fadeInDown
  • bounceIn
  • flipInX

Управление стеком уведомлений

При множестве уведомлений важно контролировать их количество:

iziToast.settings({
    maxWidth: 350,
    zindex: 999,
    overlay: false
});

Ограничение количества:

iziToast.success({
    displayMode: 2
});

Режимы displayMode:

  • 0 — без ограничений
  • 1 — замена предыдущего
  • 2 — очередь

Использование с асинхронными операциями

Пример с fetch:

fetch('/api/save', {
    method: 'POST',
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(() => {
    iziToast.success({
        title: 'Успех',
        message: 'Данные отправлены'
    });
})
.catch(() => {
    iziToast.error({
        title: 'Ошибка',
        message: 'Не удалось отправить данные'
    });
});

Интеграция с формами

Пример обработки формы:

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();

    iziToast.success({
        title: 'Отправлено',
        message: 'Форма успешно отправлена'
    });
});

Кастомные стили

Возможность полного контроля через CSS:

.iziToast.iziToast-success {
    border-radius: 10px;
    font-size: 14px;
}

Или через JS:

iziToast.success({
    class: 'my-custom-toast'
});

Группировка уведомлений

Позволяет объединять уведомления:

iziToast.success({
    id: 'save-status',
    title: 'Сохранение',
    message: 'Данные обновлены'
});

Если уведомление с таким id уже существует, оно будет обновлено.

Обработка событий

iziToast предоставляет хуки:

iziToast.success({
    onOpening: function(instance, toast) {
        console.log('Открытие');
    },
    onClosing: function(instance, toast, closedBy) {
        console.log('Закрытие:', closedBy);
    }
});

Практические сценарии использования

1. Сохранение данных

iziToast.success({
    title: 'Сохранено',
    message: 'Изменения успешно применены'
});

2. Авторизация

iziToast.success({
    title: 'Добро пожаловать',
    message: 'Вы успешно вошли в систему'
});

3. Загрузка файлов

iziToast.success({
    title: 'Загрузка завершена',
    message: 'Файл доступен для просмотра'
});

Рекомендации по использованию

  • Использовать короткие и понятные сообщения
  • Не перегружать интерфейс большим количеством уведомлений
  • Выбирать позицию с учётом UX (обычно верхний правый угол)
  • Настраивать timeout в зависимости от важности сообщения
  • Использовать иконки для визуального подтверждения

Расширенные настройки

Глобальные параметры:

iziToast.settings({
    timeout: 4000,
    resetOnHover: true,
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});

Локальные переопределения:

iziToast.success({
    timeout: 2000
});

Работа с несколькими уведомлениями

Создание серии уведомлений:

iziToast.success({ title: '1', message: 'Первое сообщение' });
iziToast.success({ title: '2', message: 'Второе сообщение' });
iziToast.success({ title: '3', message: 'Третье сообщение' });

Очистка:

iziToast.destroy();

Асинхронные цепочки уведомлений

iziToast.success({
    title: 'Шаг 1',
    message: 'Начало процесса',
    onClosing: function() {
        iziToast.success({
            title: 'Шаг 2',
            message: 'Процесс завершён'
        });
    }
});

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

  • Минимизировать количество одновременных уведомлений
  • Использовать очередь (displayMode: 2)
  • Отключать лишние анимации при высокой нагрузке
  • Глобально задавать настройки через iziToast.settings()

Особенности UX

  • Уведомления не должны перекрывать важные элементы интерфейса
  • Не рекомендуется использовать success для критически важных сообщений
  • Желательно сопровождать уведомление дополнительной визуальной обратной связью (например, изменение состояния кнопки)

Сравнение с другими типами уведомлений

Тип Цвет Назначение
success зелёный успешное действие
error красный ошибка
warning жёлтый предупреждение
info синий информационное сообщение

Итоговая структура success-уведомления

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена',
    position: 'topRight',
    timeout: 3000,
    progressBar: true,
    close: true
});

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

Оглавление