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

iziToast предоставляет мощный механизм для добавления кнопок действий в уведомления, что позволяет пользователю взаимодействовать с ними напрямую. Кнопки могут выполнять любые функции, включая переход по ссылке, вызов JavaScript-функции или закрытие уведомления.

Добавление кнопок

Для создания кнопок используется опция buttons, которая принимает массив массивов. Каждый внутренний массив описывает одну кнопку и состоит из текста кнопки и функции-обработчика клика:

iziToast.show({
    title: 'Подтвердите действие',
    message: 'Вы действительно хотите удалить этот элемент?',
    buttons: [
        ['<button>Да</button>', function (instance, toast) {
            console.log('Элемент удалён');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button>Нет</button>', function (instance, toast) {
            console.log('Действие отменено');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

  • instance — объект текущего уведомления, через который можно управлять его состоянием.

  • toast — DOM-элемент уведомления, на который была нажата кнопка.

  • Метод instance.hide() позволяет закрыть уведомление с анимацией. Параметры:

    • transitionOut — тип анимации закрытия (fadeOut, slideOut, и т.д.)
    • toast — целевой элемент уведомления
    • 'button' — указывает, что закрытие инициировано кнопкой

Стилизация кнопок

Кнопки можно стилизовать с помощью стандартных CSS-классов. Например, можно добавить классы для цвета или размера кнопки:

iziToast.show({
    title: 'Выбор действия',
    message: 'Выберите вариант',
    buttons: [
        ['<button class="iziToast-button iziToast-success">Подтвердить</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
        ['<button class="iziToast-button iziToast-error">Отменить</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Классы iziToast-success и iziToast-error наследуют стили самой библиотеки, но можно использовать любые CSS-классы для полной кастомизации.

Множественные кнопки и порядок

Порядок отображения кнопок соответствует порядку элементов в массиве buttons. Можно добавлять сколько угодно кнопок, но важно помнить о пользовательском опыте — слишком большое количество кнопок может перегрузить уведомление.

Динамические кнопки

Кнопки могут создаваться динамически в зависимости от данных. Например:

let actions = ['Принять', 'Отклонить', 'Позже'];
let buttons = actions.map(label => [
    `<button>${label}</button>`, 
    function (instance, toast) {
        console.log(`Выбрано действие: ${label}`);
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
    }
]);

iziToast.show({
    title: 'Уведомление с динамическими кнопками',
    message: 'Выберите действие',
    buttons: buttons
});

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

Особенности работы с кнопками

  • Кнопки должны быть HTML-элементами <button> или <a> для корректной обработки клика.
  • Если кнопка не закрывает уведомление самостоятельно, оно останется на экране до истечения timeout.
  • Можно комбинировать кнопки с авто-закрытием, добавляя функцию instance.hide() в обработчик клика для мгновенного скрытия уведомления.

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

  1. Кнопка с переходом по ссылке:
iziToast.show({
    title: 'Ссылка',
    message: 'Перейти на сайт?',
    buttons: [
        ['<button>Перейти</button>', function (instance, toast) {
            window.open('https://example.com', '_blank');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});
  1. Кнопки с различными эффектами закрытия:
iziToast.show({
    title: 'Закрытие разными способами',
    message: 'Выберите вариант закрытия',
    buttons: [
        ['<button>Слайд</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'slideOut' }, toast, 'button');
        }],
        ['<button>С исчезновением</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Итоговая структура

Каждое уведомление с кнопками состоит из:

  • Заголовка (title)
  • Сообщения (message)
  • Массив кнопок (buttons), где каждая кнопка — массив из HTML-разметки и функции-обработчика
  • Управления закрытием через instance.hide()
  • Возможности кастомизации через CSS

Такой подход делает iziToast гибким инструментом для интерактивных уведомлений, позволяя создавать как простые подтверждения, так и сложные сценарии взаимодействия.

Оглавление