Noty.button()

Метод Noty.button() предоставляет возможность добавлять интерактивные кнопки в уведомления, создаваемые библиотекой Noty. Это позволяет расширить стандартное поведение уведомлений, позволяя пользователю выполнять действия напрямую из всплывающего окна.

Синтаксис

Noty.button(text, className, callback, options)
  • text — текст, который будет отображаться на кнопке.
  • className — CSS-класс кнопки, можно использовать несколько классов через пробел.
  • callback — функция, которая будет вызвана при нажатии на кнопку. В качестве аргумента передаётся объект уведомления.
  • options — объект дополнительных параметров для настройки кнопки (необязательный).

Пример базового использования

new Noty({
  text: 'Вы хотите удалить запись?',
  type: 'warning',
  buttons: [
    Noty.button('Да', 'btn btn-success', function (noty) {
      console.log('Запись удалена');
      noty.close();
    }),
    Noty.button('Нет', 'btn btn-error', function (noty) {
      noty.close();
    })
  ]
}).show();

В этом примере создаются две кнопки: «Да» и «Нет». При нажатии на кнопку «Да» выполняется логика удаления записи и закрывается уведомление. Кнопка «Нет» просто закрывает уведомление без дополнительных действий.

Параметры callback

Функция обратного вызова принимает объект уведомления, что позволяет управлять его состоянием:

  • noty.close() — закрывает уведомление.
  • noty.setText(newText) — динамически меняет текст уведомления.
  • noty.setType(newType) — изменяет тип уведомления (success, error, warning, info).

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

new Noty({
  text: 'Подтвердите действие',
  buttons: [
    Noty.button('Обновить текст', 'btn btn-info', function (noty) {
      noty.setText('Текст успешно обновлён!');
    }),
    Noty.button('Закрыть', 'btn btn-secondary', function (noty) {
      noty.close();
    })
  ]
}).show();

Настройка кнопки через options

Параметр options позволяет задать дополнительные настройки:

  • id — уникальный идентификатор кнопки.
  • title — текст всплывающей подсказки (tooltip).
  • attributes — объект с HTML-атрибутами, например { disabled: true, 'data-action': 'save' }.

Пример использования:

Noty.button('Сохранить', 'btn btn-primary', function (noty) {
  console.log('Сохранение данных');
  noty.close();
}, { title: 'Сохранить изменения', attributes: { 'data-role': 'save-btn' } });

Комбинирование с событиями уведомления

Кнопки полностью интегрируются с событиями Noty:

  • onShow — выполняется при показе уведомления.
  • onClose — выполняется при закрытии.
  • onClick — срабатывает при клике на уведомление, отдельно от кнопок.

Пример интеграции:

new Noty({
  text: 'Выполнить действие?',
  type: 'alert',
  buttons: [
    Noty.button('Принять', 'btn btn-success', function (noty) {
      console.log('Действие принято');
      noty.close();
    })
  ],
  callbacks: {
    onShow: function () {
      console.log('Уведомление показано');
    },
    onClose: function () {
      console.log('Уведомление закрыто');
    }
  }
}).show();

Стиль и кастомизация

Кнопки можно стилизовать через стандартные CSS-классы или с использованием встроенных библиотек, таких как Bootstrap или Tailwind. Для более тонкой настройки можно задавать свои классы и стили через className и attributes.

Пример с кастомным классом:

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

Рекомендации по использованию

  • Использовать Noty.button() для действий, требующих подтверждения пользователя.
  • Не перегружать уведомление большим количеством кнопок — максимум 2–3.
  • Для критических действий (удаление, подтверждение) сочетать кнопки с типами уведомлений warning или error.
  • Всегда закрывать уведомление после завершения действия, чтобы не оставлять его открытым.

Поддержка разных типов уведомлений

Кнопки работают одинаково для всех типов уведомлений (alert, success, warning, error, info). Тип уведомления можно менять динамически с помощью методов noty.setType() внутри callback кнопки.

Оглавление