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

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

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

Кнопки в Noty задаются через параметр buttons, который принимает массив объектов. Каждый объект представляет отдельную кнопку и создаётся с помощью конструктора Noty.button.

Пример базовой структуры:

new Noty({
  text: 'Удалить файл?',
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Удалено');
    }),
    Noty.button('Нет', 'btn btn-danger', function () {
      console.log('Отмена');
    })
  ]
}).show();

Параметры `Noty.button`

Конструктор принимает следующие аргументы:

text — текст кнопки
className — CSS-классы для стилизации
onClick — обработчик события клика

Дополнительно может передаваться объект с опциями:

Noty.button('ОК', 'btn', handler, { id: 'btn-ok' });

Работа с несколькими кнопками

Порядок отображения

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

buttons: [
  Noty.button('Отмена', 'btn btn-secondary', cancelHandler),
  Noty.button('Сохранить', 'btn btn-primary', saveHandler)
]

Часто первичное действие располагается справа, вторичное — слева.

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

Каждая кнопка имеет собственный обработчик. Внутри функции доступен контекст уведомления через this.

Noty.button('Закрыть', 'btn btn-warning', function () {
  this.close();
});

Важно учитывать:

this указывает на экземпляр уведомления Noty
можно вызывать методы close(), setText(), setType() и другие

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

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

Noty.button('ОК', 'btn btn-success', function () {
  this.close();
});

Это позволяет:

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

Использование асинхронных действий

Кнопки часто используются для запуска асинхронных операций (например, запросов к серверу):

Noty.button('Удалить', 'btn btn-danger', function () {
  const noty = this;

  fetch('/delete', { method: 'POST' })
    .then(() => {
      noty.setText('Удалено');
      noty.setType('success');
      setTimeout(() => noty.close(), 1000);
    });
});

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

сохранение ссылки на this в переменную
обновление текста уведомления
изменение типа (цвета)
отложенное закрытие

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

Noty не предоставляет прямого API для изменения кнопок после создания, однако можно:

Закрыть текущее уведомление
Создать новое с обновлёнными кнопками

this.close();

new Noty({
  text: 'Вы уверены?',
  buttons: [
    Noty.button('Да', 'btn btn-success', confirmHandler),
    Noty.button('Нет', 'btn btn-danger', cancelHandler)
  ]
}).show();

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

Кнопки полностью зависят от CSS-классов. Обычно используются классы фреймворков (Bootstrap, Tailwind и др.).

Пример с Bootstrap:

Noty.button('Сохранить', 'btn btn-primary btn-sm', handler)

Возможности стилизации:

размеры (btn-sm, btn-lg)
цвета (btn-success, btn-danger)
кастомные классы

Блокировка повторных нажатий

При выполнении действий может потребоваться отключить кнопку после клика:

Noty.button('Отправить', 'btn btn-primary', function () {
  const btn = this.barDom.querySelector('.btn-primary');
  btn.disabled = true;

  setTimeout(() => {
    this.close();
  }, 2000);
});

Группировка логики кнопок

Для сложных сценариев удобно выносить обработчики:

function handleConfirm() {
  console.log('Подтверждено');
  this.close();
}

function handleCancel() {
  console.log('Отменено');
  this.close();
}

new Noty({
  text: 'Продолжить?',
  buttons: [
    Noty.button('Да', 'btn btn-success', handleConfirm),
    Noty.button('Нет', 'btn btn-secondary', handleCancel)
  ]
}).show();

Комбинирование с типами уведомлений

Множественные кнопки часто используются с типами уведомлений:

new Noty({
  type: 'warning',
  text: 'Действие необратимо',
  buttons: [
    Noty.button('Удалить', 'btn btn-danger', deleteHandler),
    Noty.button('Отмена', 'btn btn-secondary', cancelHandler)
  ]
}).show();

Ограничения и особенности

Кнопки доступны только при отключённом автоматическом закрытии (timeout: false)
Большое количество кнопок ухудшает UX
Требуется учитывать адаптивность (особенно на мобильных устройствах)

Практические сценарии

Подтверждение действия

buttons: [
  Noty.button('Да', 'btn btn-success', confirm),
  Noty.button('Нет', 'btn btn-danger', cancel)
]

Выбор варианта

buttons: [
  Noty.button('Сохранить', 'btn btn-primary', save),
  Noty.button('Не сохранять', 'btn btn-warning', discard),
  Noty.button('Отмена', 'btn btn-secondary', cancel)
]

Переход к действию

Noty.button('Перейти', 'btn btn-info', function () {
  window.location.href = '/dashboard';
});