Локальные настройки уведомлений

Библиотека iziToast позволяет задавать параметры уведомлений как глобально (через iziToast.settings()), так и локально — непосредственно при создании каждого отдельного уведомления. Локальные настройки имеют приоритет над глобальными и используются для точечной кастомизации поведения и внешнего вида.

Локальная конфигурация передаётся в виде объекта при вызове методов (show, success, error, info, warning, question).

Структура локальных настроек

Каждое уведомление создаётся с помощью передачи объекта параметров:

iziToast.show({
    title: 'Заголовок',
    message: 'Текст сообщения'
});

Этот объект может содержать десятки свойств, влияющих на:

  • внешний вид
  • позиционирование
  • анимации
  • поведение
  • интерактивность

Основные параметры

Текст и заголовок

iziToast.show({
    title: 'Успех',
    message: 'Данные успешно сохранены'
});
  • title — заголовок уведомления
  • message — основной текст

Дополнительно:

titleColor: '#fff',
messageColor: '#eee'

Тип уведомления

Каждый тип задаёт предустановленные стили:

iziToast.success({
    title: 'OK',
    message: 'Операция выполнена'
});

Доступные методы:

  • iziToast.show()
  • iziToast.success()
  • iziToast.error()
  • iziToast.warning()
  • iziToast.info()
  • iziToast.question()

Локально можно переопределить стиль:

color: 'blue'

Позиционирование

Каждое уведомление может быть размещено независимо:

iziToast.show({
    position: 'topRight'
});

Варианты:

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

Управление временем жизни

iziToast.show({
    timeout: 5000
});
  • timeout — время в миллисекундах (0 = не исчезает автоматически)

Дополнительно:

pauseOnHover: true,
resetOnHover: true
  • pauseOnHover — пауза при наведении
  • resetOnHover — сброс таймера

Индикатор прогресса

iziToast.show({
    progressBar: true
});

Настройки:

progressBarColor: 'red'

Кнопки и действия

Локально можно добавить интерактивные кнопки:

iziToast.show({
    buttons: [
        ['<button>OK</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['<button>Отмена</button>', function (instance, toast) {
            instance.hide({}, toast);
        }, true]
    ]
});

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

[
    HTML,
    callback,
    focus (опционально)
]

Колбэки событий

Каждое уведомление поддерживает собственные обработчики:

iziToast.show({
    onOpening: function(instance, toast) {
        console.log('Открывается');
    },
    onOpened: function(instance, toast) {
        console.log('Открыто');
    },
    onClosing: function(instance, toast) {
        console.log('Закрывается');
    },
    onClosed: function(instance, toast) {
        console.log('Закрыто');
    }
});

Управление анимацией

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

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

  • fadeIn
  • fadeInUp
  • fadeInDown
  • bounceIn
  • fadeOut
  • fadeOutUp

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

Цвета

iziToast.show({
    backgroundColor: '#333',
    titleColor: '#fff',
    messageColor: '#ddd'
});

Размер и отступы

iziToast.show({
    maxWidth: 400,
    layout: 2
});

  • layout:

    • 1 — компактный
    • 2 — расширенный

Иконки

iziToast.show({
    icon: 'icon-check',
    iconColor: '#fff'
});

Можно отключить:

icon: false

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

iziToast.show({
    close: true,
    closeOnClick: true,
    displayMode: 0
});

Параметры:

  • close — кнопка закрытия

  • closeOnClick — закрытие по клику

  • displayMode:

    • 0 — стандарт
    • 1 — одно уведомление на экран

Перекрытие глобальных настроек

Локальные настройки полностью перекрывают глобальные:

iziToast.settings({
    timeout: 10000
});

iziToast.show({
    message: 'Это уведомление исчезнет быстрее',
    timeout: 2000
});

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

Каждое уведомление может иметь уникальные параметры:

iziToast.success({
    message: 'Успех',
    timeout: 3000,
    position: 'topRight'
});

iziToast.error({
    message: 'Ошибка',
    timeout: 0,
    position: 'center',
    close: true
});

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

iziToast.show({
    group: 'auth',
    message: 'Ошибка авторизации'
});

Позволяет управлять группами:

iziToast.hide({
    group: 'auth'
});

Drag & взаимодействие

iziToast.show({
    drag: true
});

Позволяет пользователю смахнуть уведомление.

RTL и мультиязычность

iziToast.show({
    rtl: true
});

Используется для языков с направлением справа налево.

Кастомный HTML

iziToast.show({
    message: '<b>Жирный текст</b><br><i>Курсив</i>'
});

Поддерживается HTML-разметка, что позволяет создавать сложные уведомления.

Комбинирование параметров

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

iziToast.show({
    title: 'Внимание',
    message: 'Подтвердите действие',
    position: 'center',
    timeout: 0,
    overlay: true,
    close: false,
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            instance.hide({}, toast);
        }, true],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

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

Локальные параметры применяются, когда требуется:

  • различное поведение уведомлений в одном приложении
  • индивидуальные стили под разные сценарии
  • управление UX в конкретных действиях (ошибки, подтверждения, успех)

Приоритет параметров

Порядок применения:

  1. Локальные настройки
  2. Глобальные настройки (iziToast.settings)
  3. Значения по умолчанию библиотеки

Это позволяет гибко управлять уведомлениями без изменения общей конфигурации.

Оглавление