Длительность отображения

Toastify предоставляет возможность контролировать продолжительность отображения уведомлений на экране, что является ключевым элементом для создания удобного пользовательского интерфейса. В библиотеке длительность отображения задается с помощью опции duration. Эта настройка определяет, сколько миллисекунд уведомление будет оставаться видимым до автоматического исчезновения.

Установка длительности

По умолчанию Toastify использует значение 3000 миллисекунд (3 секунды). Чтобы изменить продолжительность, достаточно передать параметр duration при создании уведомления:

Toastify({
    text: "Это уведомление будет видно 5 секунд",
    duration: 5000
}).showToast();

Здесь уведомление останется на экране ровно 5 секунд, после чего автоматически исчезнет.

Бесконечная видимость уведомления

Если необходимо, чтобы уведомление оставалось на экране до явного закрытия пользователем, значение duration можно установить в -1:

Toastify({
    text: "Это уведомление не исчезнет автоматически",
    duration: -1,
    close: true
}).showToast();

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

Динамическое изменение времени отображения

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

const message = "Очень длинное уведомление, которое требует больше времени для прочтения";
Toastify({
    text: message,
    duration: message.length * 100
}).showToast();

Таким образом, более длинные сообщения будут отображаться дольше, обеспечивая достаточное время для восприятия информации.

Совмещение с другими параметрами

Параметр duration может использоваться совместно с различными опциями, такими как gravity, position, style или onClick. Это позволяет создавать гибкие уведомления с индивидуальной продолжительностью и стилем:

Toastify({
    text: "Уведомление снизу с индивидуальной длительностью",
    duration: 7000,
    gravity: "bottom",
    position: "center",
    style: {
        background: "linear-gradient(to right, #00b09b, #96c93d)"
    }
}).showToast();

Плавное исчезновение уведомления

Toastify поддерживает автоматическое плавное исчезновение уведомления, управляемое через CSS-анимацию, когда истекает duration. Это повышает визуальное восприятие и делает интерфейс более мягким и ненавязчивым.

.toastify {
    transition: opacity 0.5s ease-in-out;
}

Параметр duration напрямую влияет на момент начала анимации исчезновения: уведомление остаётся видимым всё время, указанное в duration, после чего плавно исчезает.

Важные нюансы

  • Значение duration задается в миллисекундах. Для секунд необходимо умножать число на 1000.
  • При использовании duration: -1 уведомление никогда не исчезает автоматически, что важно учитывать при проектировании интерфейсов, чтобы не блокировать пространство экрана.
  • Динамический расчёт времени отображения может повышать удобство, но чрезмерно длинные уведомления могут раздражать пользователя.

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

Оглавление