Настройка close

В библиотеке Toastify параметр close отвечает за возможность закрытия уведомления пользователем через встроенную кнопку «закрыть». Управление этим параметром позволяет гибко настраивать интерактивность всплывающих сообщений и повышать удобство интерфейса.

Использование параметра close

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

Toastify({
    text: "Пример уведомления с кнопкой закрытия",
    duration: 3000,
    close: true
}).showToast();

Объяснение:

  • true — в правом верхнем углу уведомления появляется кнопка закрытия. Пользователь может вручную закрыть тост до истечения duration.
  • false — кнопка закрытия отсутствует, уведомление исчезнет автоматически после указанного времени или останется на экране, если duration не задан.

Взаимодействие close с другими параметрами

  1. duration

    • Если duration задан, тост автоматически закроется через указанное время.
    • Если одновременно установлено close: true, пользователь может закрыть уведомление раньше.
    • Если duration: 0 и close: true, уведомление будет оставаться на экране до клика по кнопке закрытия.
Toastify({
    text: "Ожидание закрытия вручную",
    duration: 0,
    close: true
}).showToast();

  1. gravity и position

    • Кнопка закрытия отображается корректно на всех позициях тоста: сверху, снизу, справа или слева.
    • Независимо от позиции, элемент кнопки получает CSS-класс .toast-close и автоматически обрабатывает событие клика.

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

По умолчанию Toastify использует встроенный стиль для кнопки закрытия, но её внешний вид можно изменять через CSS:

.toast-close {
    background-color: transparent;
    color: #ff0000;
    font-weight: bold;
    border: none;
    cursor: pointer;
}
  • background-color — фон кнопки.
  • color — цвет крестика.
  • cursor: pointer — показывает, что элемент интерактивный.
  • border: none и font-weight: bold — визуальные корректировки для компактного вида.

Динамическое управление close

Параметр close можно изменять через создание пользовательских тостов:

let showCloseButton = true;

Toastify({
    text: "Динамическое уведомление",
    duration: 5000,
    close: showCloseButton
}).showToast();

В зависимости от значения переменной showCloseButton кнопка закрытия появится или будет скрыта.

Обработка события закрытия

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

Toastify({
    text: "Уведомление с обработчиком закрытия",
    close: true,
    callback: function() {
        console.log("Тост закрыт пользователем");
    }
}).showToast();
  • callback срабатывает при закрытии уведомления через кнопку или автоматически после duration.
  • Можно использовать для очистки данных, логирования или изменения состояния интерфейса.

Советы по использованию close

  • Для уведомлений с важной информацией и длительным отображением рекомендуется устанавливать close: true, чтобы пользователь мог закрыть тост в любое время.
  • Если уведомление кратковременное и не требует вмешательства, close можно отключить.
  • Сочетание close: true и duration: 0 подходит для предупреждений и ошибок, которые должны оставаться на экране до действия пользователя.

Параметр close в Toastify является ключевым элементом интерактивности, обеспечивая баланс между автоматическим исчезновением уведомлений и контролем пользователя. Его грамотная настройка позволяет создавать удобные, гибкие и визуально аккуратные всплывающие сообщения.

Оглавление