Нижняя часть экрана

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

iziToast.show({
    title: 'Сообщение',
    message: 'Пример уведомления внизу экрана',
    position: 'bottomRight'
});

Варианты расположения в нижней части

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

Использование этих позиций позволяет адаптировать уведомления под интерфейс приложения без перекрытия важных элементов.

Настройка внешнего вида уведомления

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

  • timeout — время отображения уведомления в миллисекундах.
iziToast.show({
    message: 'Скоро исчезну',
    position: 'bottomLeft',
    timeout: 5000
});
  • theme — визуальная тема (light, dark или кастомная).
  • color — цвет фона уведомления.
  • icon — добавление иконки для визуальной идентификации типа уведомления.
  • progressBar — отображение индикатора времени.
iziToast.show({
    title: 'Успех',
    message: 'Операция завершена',
    position: 'bottomCenter',
    color: 'green',
    icon: 'fa fa-check',
    progressBar: true,
    timeout: 4000
});

Анимации появления и скрытия

Для уведомлений в нижней части экрана анимации могут улучшать восприятие:

  • animateInside — анимация элементов внутри уведомления.
  • transitionIn / transitionOut — анимации появления и исчезновения.
iziToast.show({
    message: 'Анимированное уведомление',
    position: 'bottomRight',
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOutDown'
});

Доступные типы анимаций включают: fadeInUp, fadeInDown, bounceInRight, bounceOutLeft и другие.

Работа с несколькими уведомлениями

В нижней части экрана одновременно может отображаться несколько уведомлений. iziToast поддерживает стек уведомлений:

  • stack: true — уведомления будут складываться одно за другим.
  • maxWidth и maxHeight — ограничивают размер уведомлений, предотвращая перекрытие.
iziToast.show({
    message: 'Первое уведомление',
    position: 'bottomRight',
    stack: true
});
iziToast.show({
    message: 'Второе уведомление',
    position: 'bottomRight',
    stack: true
});

Управление взаимодействием пользователя

Нижние уведомления не должны мешать работе с контентом страницы. Для этого можно настроить:

  • close — отображение кнопки закрытия.
  • timeout — автоматическое скрытие.
  • pauseOnHover — при наведении мыши таймер паузается.
  • drag — возможность перетаскивания уведомления.
iziToast.show({
    message: 'Наведи на меня',
    position: 'bottomLeft',
    close: true,
    pauseOnHover: true,
    drag: true
});

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

  • Для коротких уведомлений лучше использовать bottomRight или bottomLeft.
  • Для важных сообщений — bottomCenter с большим timeout и прогресс-баром.
  • При большом количестве уведомлений рекомендуется включить стек и ограничивать максимальный размер.
  • Анимации делают уведомления более заметными, но не стоит злоупотреблять сложными эффектами, чтобы не отвлекать пользователя.

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

iziToast.show({
    title: 'Успех!',
    message: 'Файл успешно загружен',
    position: 'bottomCenter',
    color: 'blue',
    icon: 'fa fa-upload',
    timeout: 7000,
    progressBar: true,
    close: true,
    pauseOnHover: true,
    drag: true,
    transitionIn: 'bounceInUp',
    transitionOut: 'fadeOutDown'
});

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

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

Оглавление