Доступные позиции на экране

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

Основные позиции (layout)

Noty поддерживает несколько стандартных позиций:

  1. top – верхняя часть экрана, по центру.
  2. topLeft – верхний левый угол.
  3. topRight – верхний правый угол.
  4. bottom – нижняя часть экрана, по центру.
  5. bottomLeft – нижний левый угол.
  6. bottomRight – нижний правый угол.
  7. center – центр экрана.
  8. centerLeft – центр по вертикали, левый край по горизонтали.
  9. centerRight – центр по вертикали, правый край по горизонтали.

Каждая позиция задаётся строкой при инициализации уведомления:

new Noty({
    text: 'Успешная операция!',
    type: 'success',
    layout: 'topRight',
    timeout: 3000
}).show();

Влияние позиции на поведение уведомлений

Позиция определяет ориентацию стека уведомлений:

  • top, topLeft, topRight — новые уведомления добавляются сверху, смещая предыдущие вниз.
  • bottom, bottomLeft, bottomRight — новые уведомления появляются снизу, сдвигая старые вверх.
  • center, centerLeft, centerRight — уведомления накладываются друг на друга в центре, что позволяет создавать модальные уведомления без смещения других уведомлений.

Кастомизация позиции с помощью CSS

Noty создаёт контейнеры для каждой позиции с классами вида .noty_layout_topRight, .noty_layout_bottomLeft и т.д. Через CSS можно изменить отступы, ширину и анимацию контейнера:

.noty_layout_topRight {
    top: 20px;
    right: 20px;
    width: 300px;
}

.noty_layout_bottomLeft {
    bottom: 15px;
    left: 15px;
    width: 280px;
}

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

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

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

  • maxVisible — максимальное количество видимых уведомлений в контейнере.
  • queue — если установлен false, новые уведомления не ждут освобождения места, а перекрывают старые.

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

new Noty({
    text: 'Новое уведомление!',
    layout: 'bottomLeft',
    type: 'info',
    maxVisible: 5,
    timeout: 4000
}).show();

Если одновременно появляется больше уведомлений, чем разрешено maxVisible, библиотека автоматически удаляет старые из видимой области.

Адаптивное позиционирование

Noty позволяет использовать динамическое позиционирование через JavaScript, задавая координаты через функцию:

new Noty({
    text: 'Кастомная позиция',
    type: 'alert',
    layout: function() {
        return 'top';
    },
    callbacks: {
        onShow: function() {
            this.barDom.style.left = '50px';
            this.barDom.style.top = '100px';
        }
    }
}).show();

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

Рекомендации по выбору позиции

  • Верхние углы (topRight, topLeft) — подходят для информационных уведомлений и успеха, не мешают основному контенту.
  • Нижние углы (bottomRight, bottomLeft) — хорошо использовать для предупреждений и ошибок, когда важно, чтобы уведомление не перекрывало заголовки и меню.
  • Центр (center) — подходит для критических уведомлений, подтверждений или модальных сообщений, требующих явного внимания пользователя.

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

Оглавление