Позиционирование на экране

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

Основные позиции

Параметр position может принимать следующие значения:

  • topRight — верхний правый угол экрана.
  • topLeft — верхний левый угол экрана.
  • bottomRight — нижний правый угол экрана.
  • bottomLeft — нижний левый угол экрана.
  • topCenter — центр верхней части экрана.
  • bottomCenter — центр нижней части экрана.
  • center — центр экрана.

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

iziToast.show({
    title: 'Успех',
    message: 'Данные успешно сохранены',
    position: 'topRight'
});

В этом примере уведомление появится в правом верхнем углу страницы.

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

Позиции topRight, topLeft, bottomRight и bottomLeft позволяют уведомлениям накапливаться одно над другим. Порядок появления определяется последовательностью вызова функций iziToast. По умолчанию новые уведомления появляются сверху, но можно изменять это поведение с помощью параметра rtl и кастомных CSS-правил.

  • rtl: true — меняет направление текста и выравнивание уведомлений справа налево.
  • maxWidth — ограничивает максимальную ширину уведомления, что влияет на визуальное выравнивание внутри выбранного угла.
iziToast.show({
    title: 'Ошибка',
    message: 'Произошла ошибка при загрузке данных',
    position: 'topLeft',
    rtl: true,
    maxWidth: 350
});

Центрирование уведомлений

Параметры center, topCenter и bottomCenter используются для уведомлений, которые должны быть по центру экрана по горизонтали, либо по центру всей страницы (center). В этом случае уведомления не накладываются друг на друга стандартным образом, а располагаются одно под другим с вертикальными отступами.

iziToast.show({
    title: 'Информация',
    message: 'Система будет обновлена через 5 минут',
    position: 'center'
});

При использовании center уведомление появляется строго в середине экрана, что часто применяется для критических сообщений или модальных уведомлений.

Кастомное позиционирование через CSS

Помимо стандартных позиций, iziToast позволяет использовать кастомные стили, задавая class или переопределяя CSS-свойства. Это особенно полезно, когда требуется точное расположение в пределах контейнера или адаптация под дизайн страницы.

iziToast.show({
    title: 'Внимание',
    message: 'Проверка нестандартного позиционирования',
    class: 'custom-toast'
});
.custom-toast {
    top: 100px;
    right: 50px;
    max-width: 300px;
}

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

Контроль поведения при позиционировании

  • Смещение (offset) — позволяет задавать вертикальные и горизонтальные отступы относительно выбранного края экрана:
iziToast.show({
    title: 'Напоминание',
    message: 'Событие начнется через 10 минут',
    position: 'bottomRight',
    offset: 70
});

  • Stacking (наложение) — новые уведомления автоматически смещаются вниз (или вверх, в зависимости от позиции), чтобы не перекрывать предыдущие. Для управления этим используется CSS-параметр z-index и встроенные свойства iziToast.

  • Мобильные устройства — на маленьких экранах позиция уведомления может адаптироваться, чтобы не выходить за пределы видимой области. Параметры maxWidth и timeout помогают корректно отображать уведомления на всех устройствах.

Итоговые рекомендации по позиционированию

  1. Для стандартных сообщений выбираются позиции углов экрана: topRight, bottomLeft и т.д.
  2. Для уведомлений, требующих центра внимания, используется center.
  3. Смещение и кастомные классы позволяют адаптировать уведомления под сложные макеты.
  4. Stack и offset управляют видимостью нескольких уведомлений одновременно, предотвращая перекрытия.
  5. Адаптивность под мобильные устройства обеспечивается комбинацией maxWidth, timeout и CSS-параметров.

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

Оглавление