Закрытие по клику

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

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

Для того чтобы уведомление закрывалось при клике на него, используется параметр closeOnClick. По умолчанию значение этого параметра равно true, что означает автоматическое закрытие при нажатии. Если требуется запретить закрытие уведомления по клику, необходимо установить closeOnClick: false.

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

iziToast.show({
    title: 'Уведомление',
    message: 'Это уведомление можно закрыть кликом',
    closeOnClick: true
});

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

Отличие closeOnClick от timeout

Параметр timeout управляет временем автоматического закрытия уведомления, тогда как closeOnClick реагирует на действия пользователя. Например, уведомление с timeout: 5000 исчезнет через 5 секунд независимо от действий пользователя, а с включённым closeOnClick его можно закрыть мгновенно при клике:

iziToast.show({
    title: 'Автозакрытие и клик',
    message: 'Закроется через 5 секунд или по клику',
    timeout: 5000,
    closeOnClick: true
});

Совмещение этих параметров позволяет создавать уведомления, которые являются одновременно информативными и интерактивными.

Настройка клика по различным элементам

По умолчанию клик на любую область уведомления вызывает его закрытие. Однако в некоторых случаях требуется назначить закрытие только на определённые элементы, например, кнопку внутри уведомления. Для этого можно использовать метод onclick:

iziToast.show({
    title: 'Специальное закрытие',
    message: 'Закроется только по кнопке',
    close: false,
    buttons: [
        ['<button>Закрыть</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }]
    ]
});

В этом примере close: false отключает стандартное закрытие по клику на уведомление, а кнопка внутри уведомления вручную инициирует метод hide.

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

Помимо клика, iziToast позволяет закрывать уведомления программно через методы hide и destroy. Это полезно, если требуется закрытие уведомления по событию, а не только по действию пользователя:

let toast = iziToast.show({
    title: 'Программное закрытие',
    message: 'Это уведомление закроется через 3 секунды',
    timeout: false
});

setTimeout(() => {
    iziToast.hide({}, toast);
}, 3000);

В этом примере уведомление останется на экране до тех пор, пока не сработает таймер, после чего метод hide закроет его.

Настройка анимации при закрытии

iziToast поддерживает различные анимации при закрытии уведомлений. Параметры transitionIn и transitionOut позволяют задавать анимацию появления и исчезновения. Даже при закрытии по клику можно использовать плавные эффекты:

iziToast.show({
    title: 'Анимация закрытия',
    message: 'Используется плавный эффект исчезновения',
    closeOnClick: true,
    transitionOut: 'fadeOutUp'
});

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

Комбинирование closeOnClick с другими интерактивными функциями

Параметр closeOnClick удобно комбинировать с другими функциями iziToast, например:

  • timeout – автоматическое закрытие через заданное время
  • buttons – добавление интерактивных кнопок внутри уведомления
  • onClosing – обратный вызов перед закрытием, позволяющий выполнять дополнительные действия

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

iziToast.show({
    title: 'Комплексное уведомление',
    message: 'Закрытие по клику, кнопка и таймер',
    timeout: 8000,
    closeOnClick: true,
    buttons: [
        ['<button>Сохранить</button>', function (instance, toast) {
            console.log('Сохранение данных');
            instance.hide({}, toast, 'button');
        }]
    ],
    onClosing: function(instance, toast, closedBy){
        console.log('Уведомление закрыто:', closedBy);
    }
});

В этом уведомлении пользователь может закрыть уведомление кликом, дождаться автозакрытия через 8 секунд или использовать кнопку для дополнительного действия перед закрытием.

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

Оглавление