Нижние позиции

В библиотеке Noty расположение уведомления на экране контролируется параметром layout. Для отображения уведомлений в нижней части окна доступны следующие значения:

  • bottom – уведомление появляется по центру нижней части экрана.
  • bottomLeft – уведомление прикрепляется к левому нижнему углу.
  • bottomRight – уведомление прикрепляется к правому нижнему углу.

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

Создание уведомления с нижней позицией

Простейший пример использования нижней позиции в Noty:

new Noty({
    text: 'Это уведомление внизу экрана',
    layout: 'bottomRight',
    type: 'success',
    timeout: 3000,
    progressBar: true
}).show();

Ключевые моменты:

  • text – текст уведомления.
  • layout – место отображения уведомления.
  • type – визуальный стиль (alert, success, warning, error, info).
  • timeout – время отображения уведомления в миллисекундах.
  • progressBar – отображение индикатора времени до скрытия.

Настройка нескольких уведомлений

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

new Noty({ text: 'Успешная операция', type: 'success', layout: 'bottomLeft', timeout: 4000 }).show();
new Noty({ text: 'Ошибка при загрузке', type: 'error', layout: 'bottomLeft', timeout: 4000 }).show();
new Noty({ text: 'Информация обновлена', type: 'info', layout: 'bottomLeft', timeout: 4000 }).show();

Особенности нижних позиций:

  • Уведомления на bottomLeft и bottomRight выстраиваются вертикально вверх, начиная с нижнего края.
  • Сочетание с параметрами timeout и progressBar позволяет визуально контролировать продолжительность показа уведомлений.
  • Повторное создание уведомлений не требует явного удаления старых, библиотека управляет контейнерами автоматически.

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

Noty позволяет полностью кастомизировать стиль уведомлений через CSS:

.noty_layout_bottomRight {
    bottom: 20px;
    right: 20px;
}

.noty_theme_mint {
    background-color: #2ecc71;
    color: white;
    font-size: 14px;
    border-radius: 5px;
}

Советы по кастомизации нижних уведомлений:

  • bottom и right/left определяют отступы от края экрана.
  • font-size, padding и border-radius влияют на читаемость и визуальную гармонию.
  • Цвета и тени можно изменять для соответствия общей стилистике приложения.

Управление временем и поведением уведомлений снизу

Noty предоставляет расширенные параметры управления нижними уведомлениями:

  • timeout – определяет автоматическое скрытие. Установка false делает уведомление постоянным.
  • animation – параметры входа и выхода:
new Noty({
    text: 'Анимированное уведомление',
    layout: 'bottom',
    type: 'info',
    animation: {
        open: 'animated bounceInUp',
        close: 'animated bounceOutDown'
    }
}).show();
  • killer – позволяет удалить все предыдущие уведомления того же контейнера перед показом нового, предотвращая перегруженность нижней позиции.

События уведомлений в нижней позиции

Noty предоставляет событийную систему для работы с уведомлениями:

  • onShow – срабатывает при появлении уведомления.
  • onClose – срабатывает при закрытии.
  • onClick – позволяет реагировать на клики по уведомлению.

Пример:

new Noty({
    text: 'Нажми на меня',
    layout: 'bottomRight',
    type: 'alert',
    timeout: 5000,
    callbacks: {
        onClick: function() {
            alert('Уведомление нажато!');
        }
    }
}).show();

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

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

  1. Для коротких информационных сообщений использовать bottomRight или bottomLeft.
  2. Для предупреждений и ошибок, требующих внимания пользователя, можно использовать bottom, чтобы уведомление было более заметным.
  3. Комбинировать с анимацией для плавного появления и исчезновения.
  4. Поддерживать размер уведомлений оптимальным, чтобы нижняя часть экрана оставалась читаемой и не перекрывала элементы управления.

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

Оглавление