Центрирование

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

Горизонтальное центрирование

По умолчанию iziToast поддерживает стандартные позиции: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center. Для горизонтального центрирования важно использовать позиции с ключевым словом Center.

Пример горизонтально центрированного уведомления:

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление расположено по центру сверху',
    position: 'topCenter'
});

Ключевой момент: topCenter и bottomCenter обеспечивают выравнивание уведомления по центру страницы горизонтально, но оставляют стандартное смещение по вертикали относительно выбранного края окна браузера.

Полное центрирование (по горизонтали и вертикали)

Для абсолютного центрирования уведомления в середине экрана необходимо использовать позицию center:

iziToast.show({
    title: 'Внимание',
    message: 'Это полностью центрированное уведомление',
    position: 'center'
});

При position: 'center' уведомление появляется строго по центру окна и не привязано к верхнему или нижнему краю. Важно учитывать, что при этом могут применяться дополнительные стили, влияющие на размер и анимацию появления.

Настройка смещения через offset

Даже при позициях с центром возможно смещение с помощью параметра offset:

iziToast.show({
    title: 'Смещение',
    message: 'Центр смещен на 50px вниз',
    position: 'center',
    offset: 50
});
  • Параметр offset задаёт вертикальное смещение уведомления относительно стандартного положения.
  • Значение может быть положительным или отрицательным.

Горизонтальное выравнивание через CSS

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

iziToast.show({
    title: 'Кастомное выравнивание',
    message: 'Используется CSS для точного центрирования',
    class: 'my-centered-toast'
});

И CSS:

.my-centered-toast {
    left: 50% !important;
    transform: translateX(-50%) !important;
}
  • Свойство left: 50% перемещает уведомление к середине экрана.
  • transform: translateX(-50%) корректирует смещение, чтобы центр уведомления совпадал с центром окна.

Центрирование в модальных или фиксированных контейнерах

Если уведомление необходимо разместить внутри определённого контейнера, следует использовать параметр target:

iziToast.show({
    title: 'Внутри контейнера',
    message: 'Центрирование относительно блока',
    position: 'center',
    target: '#myModal'
});
  • Уведомление будет центрировано относительно элемента #myModal, а не всей страницы.
  • Полезно для всплывающих окон, модальных форм и панелей.

Управление анимацией при центрировании

Анимация появления уведомления также влияет на восприятие центрирования. Стандартные анимации: fadeInDown, fadeInUp, fadeInLeft, fadeInRight. Для центрированных уведомлений чаще применяют fadeIn или zoomIn, чтобы визуальный эффект не смещал уведомление:

iziToast.show({
    title: 'Эффект появления',
    message: 'Центрированное уведомление с анимацией',
    position: 'center',
    animateInside: true,
    transitionIn: 'fadeIn',
    transitionOut: 'fadeOut'
});
  • animateInside: true позволяет анимировать содержимое без изменения позиции блока.
  • transitionIn и transitionOut задают плавное появление и скрытие.

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

  • Для быстрого центрирования на странице использовать position: 'center'.
  • Для горизонтального центрирования без изменения вертикали применять topCenter или bottomCenter.
  • Для точного контроля через CSS использовать left: 50% и transform: translateX(-50%).
  • При центрировании внутри контейнеров использовать target.
  • Следить за анимацией, чтобы визуально уведомление оставалось на своём месте.

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

Оглавление