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

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

Основной синтаксис кнопок

Для добавления кнопок используется параметр 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');
        }],
        ['<button>Отложить</button>', function (instance, toast) {
            console.log('Нажата кнопка Отложить');
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

Пояснения по коду:

  • instance — объект текущего iziToast, позволяющий управлять уведомлением.
  • toast — DOM-элемент уведомления.
  • instance.hide() — закрывает уведомление, можно указать тип анимации и источник события (button или timeout).

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

Кнопки могут быть полностью кастомизированы с помощью CSS или встроенных классов:

buttons: [
    ['<button class="iziToast-btn iziToast-btn-success">Да</button>', function (instance, toast) {
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
    }],
    ['<button class="iziToast-btn iziToast-btn-danger">Нет</button>', function (instance, toast) {
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
    }]
]
  • iziToast-btn-success — зеленая кнопка действия.
  • iziToast-btn-danger — красная кнопка действия.
  • Можно добавить свои классы для полной кастомизации внешнего вида.

Расположение кнопок

По умолчанию кнопки располагаются горизонтально, но можно изменить их расположение через CSS или свойства контейнера. Пример с вертикальной компоновкой:

.iziToast-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

Комбинация с другими параметрами

Кнопки могут использоваться вместе с другими функциональными возможностями iziToast:

  • Автоматическое закрытие: timeout: 5000
  • Анимации: transitionIn, transitionOut
  • Позиционирование: position: 'topRight'
  • Типы уведомлений: color: 'green' или theme: 'dark'

Пример комбинированного уведомления:

iziToast.show({
    title: 'Действие необходимо',
    message: 'Выберите один из вариантов ниже:',
    timeout: 7000,
    position: 'bottomRight',
    theme: 'dark',
    buttons: [
        ['<button class="iziToast-btn-success">Согласен</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            console.log('Действие подтверждено');
        }],
        ['<button class="iziToast-btn-danger">Отказ</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            console.log('Действие отменено');
        }]
    ]
});

Обработка динамических кнопок

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

const actions = ['Сохранить', 'Удалить', 'Отмена'];
const buttons = actions.map(action => [
    `<button>${action}</button>`,
    function (instance, toast) {
        console.log(`Выбрано: ${action}`);
        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
    }
]);

iziToast.show({
    title: 'Множественные варианты',
    message: 'Выберите действие:',
    buttons: buttons
});

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

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

  • Каждое нажатие кнопки выполняет свою функцию без конфликтов с другими кнопками.
  • Можно комбинировать закрытие уведомления и выполнение других действий.
  • Обработчики кнопок имеют доступ к объекту instance, что позволяет управлять любыми аспектами уведомления: скрытие, изменение текста, перерисовка.

Практические советы

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

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

Оглавление