Прозрачность и overlay

В библиотеке iziToast прозрачность уведомлений контролируется с помощью опции opacity. Этот параметр принимает числовое значение от 0 до 1, где 0 полностью прозрачный элемент, а 1 — полностью непрозрачный. Настройка прозрачности полезна для создания ненавязчивых уведомлений, которые не перекрывают важный контент страницы.

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

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление с прозрачностью 0.7',
    opacity: 0.7,
});

Ключевой момент: значение opacity применяется только к видимой области уведомления. Фоновый overlay (если он активен) управляется отдельно через опцию overlay.

Настройка overlay

Опция overlay позволяет затемнять фон страницы при отображении уведомления. Она принимает булевое значение:

  • true — включение затемнения всего экрана.
  • false — уведомление отображается без затемнения.

Overlay особенно полезен для уведомлений с высоким приоритетом, например, предупреждений или ошибок, требующих немедленного внимания пользователя.

Пример:

iziToast.show({
    title: 'Ошибка',
    message: 'Невозможно выполнить действие!',
    overlay: true,
});

При включенном overlay создается полупрозрачный слой поверх всего содержимого страницы. Его цвет и прозрачность можно дополнительно настраивать через CSS, переопределяя классы iziToast:

.iziToast-overlay {
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный черный фон */
}

Одновременная работа opacity и overlay

Важно понимать различие между opacity уведомления и overlay:

  • opacity регулирует прозрачность конкретного тоста, включая текст и фон самого уведомления.
  • overlay управляет затемнением всей страницы за пределами уведомления, не влияя на сам тост.

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

iziToast.show({
    title: 'Внимание',
    message: 'Это уведомление с полупрозрачным тостом и overlay',
    opacity: 0.85,
    overlay: true,
});

В этом примере сам тост полупрозрачный, но фон страницы затемнен для выделения уведомления.

Плавная анимация прозрачности

Для создания более плавного визуального эффекта можно использовать CSS-переходы. Например:

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

Это позволяет изменять значение opacity динамически с анимацией. В сочетании с JavaScript можно реализовать появление и исчезновение уведомления с постепенным затемнением или прозрачноcтью.

Управление прозрачностью overlay через опции и CSS

По умолчанию overlay имеет непрозрачность 0.3, но ее можно изменить через CSS, как показано выше. Для более гибкой работы можно использовать динамическое изменение цвета overlay при создании уведомления:

iziToast.settings({
    overlay: true,
    overlayColor: 'rgba(50, 50, 50, 0.7)'
});

Эта настройка задает цвет overlay для всех последующих уведомлений. Если требуется индивидуальное управление на каждый тост, можно комбинировать overlay: true с динамическим классом CSS.

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

  • Для информативных уведомлений без прерывания работы пользователя лучше использовать opacity < 1 и overlay: false.
  • Для критических сообщений с требованием подтверждения — включать overlay и устанавливать opacity близкой к 1.
  • Overlay и прозрачность должны быть согласованы с дизайном страницы: слишком темный overlay или полностью прозрачный тост могут ухудшить читаемость.

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

Оглавление