Свайпы для закрытия

В библиотеке iziToast функциональность свайпов позволяет пользователям закрывать уведомления жестом, что особенно удобно на мобильных устройствах с сенсорными экранами. Этот механизм реализован через прослушивание событий касания и перемещения по оси X или Y.

Включение свайпов

Для активации возможности закрытия уведомлений свайпом необходимо использовать опцию drag при создании уведомления:

iziToast.show({
    title: 'Сообщение',
    message: 'Это уведомление можно закрыть свайпом',
    drag: true
});
  • drag – булевый параметр, по умолчанию true в последних версиях iziToast. Если установить false, уведомление нельзя будет перемещать свайпом.

Настройка направления свайпа

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

  • 'x' – свайп по горизонтали (влево или вправо)
  • 'y' – свайп по вертикали (вверх или вниз)
  • 'xy' – свайп по обеим осям

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

iziToast.show({
    title: 'Предупреждение',
    message: 'Попробуйте свайпнуть вверх или вниз',
    drag: true,
    dragDirection: 'y'
});

Чувствительность свайпа

Чувствительность свайпа можно регулировать с помощью опций dragThreshold и dragHandle:

  • dragThreshold – минимальное смещение в пикселях для срабатывания свайпа. Пример: dragThreshold: 100 означает, что уведомление закроется только при перемещении на 100px или больше.

  • dragHandle – селектор внутри уведомления, который будет служить “ручкой” для свайпа. Если не указан, свайп доступен по всему уведомлению.

iziToast.show({
    title: 'Информация',
    message: 'Свайп доступен только по заголовку',
    drag: true,
    dragHandle: '.iziToast-title'
});

События, связанные со свайпом

iziToast предоставляет события, которые позволяют отслеживать процесс свайпа:

  • onOpening – вызывается в момент открытия уведомления.
  • onClosing – вызывается перед закрытием уведомления, в том числе при свайпе.
  • onClosed – вызывается после полного закрытия уведомления.

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

iziToast.show({
    title: 'Свайп',
    message: 'Закройте свайпом',
    drag: true,
    onClosing: function(instance, toast, closedBy){
        if(closedBy === 'drag'){
            console.log('Уведомление закрыто свайпом');
        }
    }
});

Анимации при свайпе

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

  • Уведомление постепенно становится прозрачным (opacity) и смещается в сторону свайпа (transform: translateX или translateY).
  • Можно настроить длительность анимации через опцию transitionIn и transitionOut или с помощью пользовательских стилей CSS.

Пример кастомной анимации:

iziToast.show({
    title: 'Кастомная анимация',
    message: 'Свайп с ускорением',
    drag: true,
    transitionOut: 'fadeOutUp',
    transitionOutEasing: 'easeInBack'
});

Ограничения свайпа

  • Свайп доступен только для уведомлений с position 'topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'topCenter' и 'bottomCenter'. Уведомления, растянутые на всю ширину ('center' с maxWidth: '100%'), могут вести себя нестабильно.
  • Свайп игнорируется, если установлено timeout: false и уведомление заблокировано (pauseOnHover: true может замедлить реакцию).
  • Перетаскивание уведомления можно заблокировать на отдельных элементах с помощью CSS: pointer-events: none;.

Практические рекомендации

  • Использовать свайпы для уведомлений с краткой информацией, чтобы пользователь мог быстро закрыть их жестом.
  • Для длинных сообщений лучше оставлять кнопку закрытия, так как свайп может быть случайно пропущен.
  • При кастомизации анимаций свайпа учитывать скорость перемещения, чтобы не нарушать UX.

Свайпы в iziToast обеспечивают интуитивное взаимодействие с уведомлениями, особенно на мобильных устройствах, и при правильной настройке повышают удобство работы с интерфейсом.

Оглавление