Структура вызова методов

Библиотека iziToast предоставляет единый объект iziToast, через который осуществляется взаимодействие с уведомлениями. Все методы вызываются напрямую у этого объекта и принимают в качестве аргумента объект конфигурации.

Базовая форма вызова:

iziToast.method(options);

где:

  • method — конкретный метод (например, show, success, error)
  • options — объект с параметрами уведомления

Метод show как универсальная точка входа

Метод show является основным и наиболее гибким способом создания уведомлений. Он принимает полный набор настроек.

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

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

  • Позволяет вручную задавать все параметры
  • Не имеет предустановленного стиля
  • Используется как базовый слой для всех остальных методов

Специализированные методы

Для упрощения работы предусмотрены методы с предустановленными стилями:

iziToast.success(options);
iziToast.error(options);
iziToast.warning(options);
iziToast.info(options);
iziToast.question(options);

Пример:

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

Ключевые отличия от show:

  • Автоматически задают цветовую схему
  • Имеют встроенные иконки
  • Сокращают количество конфигурации

Объект параметров options

Все методы принимают единый объект конфигурации. Его структура включает множество полей.

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

{
    title: 'Заголовок',
    message: 'Сообщение',
    timeout: 5000,
    position: 'topRight'
}
  • title — заголовок уведомления
  • message — основной текст
  • timeout — время отображения (в миллисекундах)
  • position — позиция на экране

Параметры внешнего вида

{
    backgroundColor: '#333',
    titleColor: '#fff',
    messageColor: '#ccc',
    icon: 'fa fa-check'
}
  • backgroundColor — цвет фона
  • titleColor — цвет заголовка
  • messageColor — цвет текста
  • icon — класс иконки

Параметры поведения

{
    timeout: 3000,
    close: true,
    progressBar: true,
    pauseOnHover: true
}
  • close — отображение кнопки закрытия
  • progressBar — индикатор времени
  • pauseOnHover — пауза при наведении

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

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

iziToast.show({
    title: 'Событие',
    message: 'Пример',
    onOpening: function(instance, toast) {
        console.log('Открывается');
    },
    onClosing: function(instance, toast, closedBy) {
        console.log('Закрывается');
    }
});

Доступные колбэки:

  • onOpening
  • onOpened
  • onClosing
  • onClosed

Параметры:

  • instance — ссылка на iziToast
  • toast — DOM-элемент уведомления
  • closedBy — причина закрытия

Передача HTML-контента

Возможна передача HTML внутри сообщения:

iziToast.show({
    title: 'HTML',
    message: '<b>Жирный текст</b>'
});

Для повышения безопасности используется параметр:

{
    message: 'Текст',
    messageSize: 14,
    maxWidth: 400
}

Кнопки и интерактивные элементы

Добавление кнопок осуществляется через массив buttons:

iziToast.show({
    title: 'Подтверждение',
    message: 'Продолжить?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            instance.hide({}, toast);
        }],
        ['<button>Нет</button>', function (instance, toast) {
            instance.hide({}, toast);
        }]
    ]
});

Структура элемента массива:

[
    HTML-кнопки,
    обработчик клика,
    фокус (необязательно)
]

Управление экземплярами уведомлений

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

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

iziToast.hide({}, toastElement);

или массово:

iziToast.destroy();

Глобальные настройки

Настройки можно задать один раз через settings:

iziToast.settings({
    timeout: 4000,
    position: 'bottomLeft'
});

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

Переопределение параметров

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

iziToast.settings({
    timeout: 4000
});

iziToast.show({
    message: 'Локальный таймаут',
    timeout: 1000
});

Асинхронное управление

Методы можно использовать в асинхронных сценариях:

fetch('/api')
    .then(() => {
        iziToast.success({
            message: 'Данные загружены'
        });
    })
    .catch(() => {
        iziToast.error({
            message: 'Ошибка загрузки'
        });
    });

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

Вызовы методов допускают комбинирование различных настроек:

iziToast.info({
    title: 'Информация',
    message: 'Комбинированный пример',
    position: 'bottomCenter',
    timeout: 7000,
    progressBar: false,
    closeOnClick: true
});

Структурные особенности API

  • Все методы статичны и вызываются напрямую
  • Единый формат аргументов
  • Отсутствие необходимости создавать экземпляры вручную
  • Поддержка декларативного описания через объект

Расширение конфигурации

Возможна динамическая сборка параметров:

const config = {
    title: 'Динамика',
    message: 'Сформировано программно'
};

if (isError) {
    config.backgroundColor = 'red';
}

iziToast.show(config);

Использование шаблонов

Для повторного использования удобно создавать шаблоны:

const baseToast = {
    position: 'topRight',
    timeout: 3000
};

iziToast.success({
    ...baseToast,
    message: 'Успешно'
});

Взаимодействие с DOM

Каждое уведомление добавляется в DOM автоматически. Элемент можно получить в колбэках и модифицировать:

iziToast.show({
    message: 'DOM пример',
    onOpened: function(instance, toast) {
        toast.style.border = '2px solid red';
    }
});

Иерархия вызовов

  1. Вызов метода (show, success, и т.д.)
  2. Объединение параметров (глобальные + локальные)
  3. Создание DOM-элемента
  4. Применение стилей
  5. Отображение
  6. Обработка событий
  7. Удаление

Типичные ошибки в структуре вызова

  • Передача строки вместо объекта:
iziToast.show('Ошибка'); // некорректно
  • Неправильный формат кнопок:
buttons: ['Кнопка'] // некорректно
  • Отсутствие ключевых полей:
iziToast.show({}); // уведомление без содержания

Оптимизация вызовов

  • Использование шаблонов уменьшает дублирование
  • Глобальные настройки упрощают конфигурацию
  • Специализированные методы ускоряют разработку

Вложенные вызовы

Возможны цепочки вызовов через события:

iziToast.show({
    message: 'Первое',
    onClosed: function() {
        iziToast.success({
            message: 'Второе'
        });
    }
});

Итоговая модель вызова

Любой вызов метода в iziToast сводится к следующей логике:

iziToast.method({
    // конфигурация
});

где:

  • метод определяет стиль и поведение по умолчанию
  • объект параметров полностью контролирует результат
  • система автоматически управляет жизненным циклом уведомления
Оглавление