Параметр position

Параметр position в библиотеке Toastify отвечает за определение положения всплывающего уведомления на экране. Он позволяет управлять тем, где именно появится тост: в верхней части окна, внизу, слева или справа. Правильное использование position повышает удобство интерфейса и делает уведомления менее навязчивыми.

Возможные значения

position принимает строковые значения, которые можно разделить на две группы: по вертикали и по горизонтали. Формат: "{вертикаль}-{горизонталь}".

  • Верхняя часть экрана (top)

    • top-left — уведомление появляется в левом верхнем углу.
    • top-center — уведомление фиксируется в центре верхней части экрана.
    • top-right — уведомление появляется в правом верхнем углу.

  • Нижняя часть экрана (bottom)

    • bottom-left — левый нижний угол.
    • bottom-center — центр нижней части экрана.
    • bottom-right — правый нижний угол.

Если параметр не задан, по умолчанию используется top-right.

Синтаксис использования

Toastify({
  text: "Пример уведомления",
  duration: 3000,
  position: "bottom-left"
}).showToast();

В этом примере уведомление будет отображаться в левом нижнем углу и исчезнет через 3 секунды.

Особенности отображения

  1. Вертикальное позиционирование

    • Значение top закрепляет тост сверху, а bottom — снизу.
    • Для длинных списков уведомлений важно помнить, что тосты не перекрывают содержимое страницы полностью, а появляются поверх элементов с фиксированным или относительным позиционированием.

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

    • left и right смещают уведомление к краям экрана, center — центрирует по горизонтали.
    • Использование center удобно для предупреждений и информационных сообщений, которые должны быть максимально заметны.

  3. Мобильные устройства

    • На небольших экранах top-left и top-right могут частично перекрывать интерфейс. В таких случаях часто используют top-center или bottom-center.

Динамическое изменение позиции

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

function notify(message, type) {
  let pos = type === "error" ? "top-right" : "bottom-center";

  Toastify({
    text: message,
    duration: 4000,
    position: pos
  }).showToast();
}

notify("Ошибка загрузки данных", "error");
notify("Данные успешно сохранены", "success");

В этом примере ошибки отображаются в правом верхнем углу, а успешные действия — внизу по центру.

Советы по использованию

  • Использовать одну стратегию позиции для всех однотипных уведомлений, чтобы не создавать визуальный хаос.
  • Для уведомлений критического характера предпочтительнее top-center или top-right, так как верхняя часть экрана обычно привлекает больше внимания.
  • Для вспомогательных сообщений можно применять bottom-left или bottom-center, чтобы они не отвлекали пользователя от основного контента.
  • Комбинируя с параметрами duration и gravity, можно добиться плавного и контролируемого появления уведомлений без резкого изменения интерфейса.

Пример с несколькими тостами

Toastify({
  text: "Уведомление слева сверху",
  duration: 2000,
  position: "top-left"
}).showToast();

Toastify({
  text: "Уведомление по центру снизу",
  duration: 2500,
  position: "bottom-center"
}).showToast();

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

Использование параметра position в Toastify позволяет гибко управлять видимостью уведомлений, улучшает UX и обеспечивает аккуратное распределение всплывающих сообщений на экране.

Оглавление