Класс кнопки

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

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

Создание кнопки

Для создания кнопки используется конструктор Noty.button. Он принимает три основных аргумента:

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

Пример:

var button = Noty.button('ОК', 'btn btn-success', function () {
    console.log('Кнопка нажата');
});

Использование кнопок в уведомлении

Кнопки передаются в конфигурацию уведомления через свойство buttons, представляющее собой массив:

new Noty({
    text: 'Подтвердите действие',
    buttons: [
        Noty.button('Да', 'btn btn-primary', function (noty) {
            console.log('Подтверждено');
            noty.close();
        }),
        Noty.button('Нет', 'btn btn-danger', function (noty) {
            console.log('Отменено');
            noty.close();
        })
    ]
}).show();

В callback-функции доступен объект уведомления (noty), что позволяет управлять им — например, закрывать или обновлять.

Контекст выполнения callback

Функция-обработчик получает экземпляр уведомления в качестве аргумента:

function (noty) {
    noty.close();
}

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

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

Кастомизация кнопок

Класс кнопки принимает CSS-класс, что дает гибкость в оформлении:

Noty.button('Удалить', 'btn btn-danger btn-sm', function (noty) {
    console.log('Удаление выполнено');
    noty.close();
});

Можно использовать:

  • Bootstrap-классы (btn, btn-primary, btn-danger)
  • собственные стили
  • анимации и эффекты

Несколько кнопок и их поведение

Количество кнопок не ограничено:

buttons: [
    Noty.button('Сохранить', 'btn btn-success', function (noty) {
        console.log('Сохранено');
        noty.close();
    }),
    Noty.button('Редактировать', 'btn btn-warning', function () {
        console.log('Редактирование');
    }),
    Noty.button('Отмена', 'btn btn-secondary', function (noty) {
        noty.close();
    })
]

Каждая кнопка работает независимо и может выполнять свою логику.

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

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

function (noty) {
    noty.close();
}

Если закрытие не требуется:

function () {
    console.log('Уведомление остаётся открытым');
}

Отключение автозакрытия

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

new Noty({
    text: 'Выберите действие',
    timeout: false,
    buttons: [...]
}).show();

Это обеспечивает контроль пользователя над временем взаимодействия.

Работа с асинхронными действиями

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

Noty.button('Загрузить', 'btn btn-primary', function (noty) {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            console.log(data);
            noty.close();
        });
});

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

Динамическое изменение состояния

Внутри callback можно модифицировать уведомление:

Noty.button('Обновить', 'btn btn-info', function (noty) {
    noty.setText('Обновление...');
});

Также возможно:

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

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

  • Кнопки работают только при отключённом или увеличенном timeout
  • Не рекомендуется перегружать уведомление большим количеством кнопок
  • Все кнопки должны быть понятны и иметь четкую цель
  • Callback выполняется синхронно, если не используется асинхронный код

Расширенные сценарии

Подтверждение удаления

new Noty({
    text: 'Удалить элемент?',
    type: 'warning',
    timeout: false,
    buttons: [
        Noty.button('Да', 'btn btn-danger', function (noty) {
            deleteItem();
            noty.close();
        }),
        Noty.button('Нет', 'btn btn-secondary', function (noty) {
            noty.close();
        })
    ]
}).show();

Переход по ссылке

Noty.button('Открыть', 'btn btn-primary', function () {
    window.location.href = '/profile';
});

Многошаговое взаимодействие

Noty.button('Далее', 'btn btn-primary', function (noty) {
    noty.setText('Шаг 2');
});

Лучшие практики

  • Использовать не более 2–3 кнопок
  • Чётко различать действия по цвету
  • Всегда обрабатывать закрытие уведомления
  • Делать подписи кнопок короткими и понятными
  • Избегать неоднозначных действий

Итоговая структура кнопки

Кнопка в Noty — это объект с тремя ключевыми составляющими:

  • визуальное представление (текст и стили)
  • поведенческая логика (callback)
  • связь с уведомлением (экземпляр Noty)

Это делает механизм кнопок мощным инструментом для построения интерактивных уведомлений в интерфейсе.

Оглавление