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

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

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

Для создания уведомления используется конструктор Noty с объектом настроек. Основные параметры:

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    layout: 'topRight',
    theme: 'mint',
    timeout: 3000,
    progressBar: true,
}).show();
  • text — текст уведомления.
  • type — тип (alert, success, warning, error, info), который влияет на цвет и иконки.
  • layout — расположение на странице (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter).
  • theme — визуальная тема, которая задаёт общий стиль уведомления.
  • timeout — время отображения в миллисекундах.
  • progressBar — визуальный индикатор оставшегося времени показа.

Для адаптивной верстки особенно важны layout, theme и кастомные стили.

Использование CSS медиа-запросов

Noty генерирует уведомления как обычные DOM-элементы с классами .noty_bar и .noty_text. Это позволяет управлять стилями через CSS:

/* Для мобильных устройств */
@media (max-width: 480px) {
    .noty_bar {
        width: 90% !important;
        font-size: 14px !important;
        padding: 10px !important;
    }
}

/* Для планшетов */
@media (min-width: 481px) and (max-width: 1024px) {
    .noty_bar {
        width: 70% !important;
        font-size: 16px !important;
        padding: 12px !important;
    }
}

/* Для десктопов */
@media (min-width: 1025px) {
    .noty_bar {
        width: 400px !important;
        font-size: 18px !important;
        padding: 15px !important;
    }
}

Ключевой момент: !important часто необходим, так как Noty добавляет собственные инлайн-стили, которые переопределяют обычные правила CSS.

Адаптивное положение уведомлений

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

function getLayout() {
    if (window.innerWidth < 480) return 'bottomCenter';
    if (window.innerWidth < 1024) return 'topRight';
    return 'topCenter';
}

new Noty({
    text: 'Уведомление с адаптивным layout',
    type: 'info',
    layout: getLayout(),
    theme: 'relax',
    timeout: 4000,
}).show();

Для автоматической адаптации можно добавить обработчик события resize:

window.addEventListener('resize', () => {
    Noty.closeAll();
    new Noty({
        text: 'Адаптивное уведомление',
        type: 'alert',
        layout: getLayout(),
        theme: 'mint',
        timeout: 3000,
    }).show();
});

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

Использование кастомных тем и классов

Noty позволяет добавлять свои CSS-классы к каждому уведомлению через параметр className. Это удобно для детальной адаптивной настройки:

new Noty({
    text: 'Кастомное уведомление',
    type: 'success',
    layout: 'topRight',
    theme: 'mint',
    className: 'custom-noty',
    timeout: 3500,
}).show();
.custom-noty {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .custom-noty {
        width: 95% !important;
        font-size: 15px;
    }
}

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

Анимации и адаптивность

Noty поддерживает анимации появления и скрытия через CSS или встроенные эффекты animation:

new Noty({
    text: 'Анимация уведомления',
    type: 'warning',
    layout: 'topLeft',
    theme: 'relax',
    animation: {
        open: 'animated bounceInDown',
        close: 'animated bounceOutUp'
    },
    timeout: 3000,
}).show();

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

Динамическое масштабирование шрифтов и элементов

Для улучшения читаемости уведомлений на разных устройствах можно вычислять размер шрифта и padding через Jav * aScript:

function adaptiveNotyFont() {
    const width = window.innerWidth;
    if (width < 480) return 14;
    if (width < 1024) return 16;
    return 18;
}

new Noty({
    text: 'Динамический размер шрифта',
    type: 'info',
    layout: 'topRight',
    theme: 'mint',
    timeout: 4000,
    callbacks: {
        onShow: function() {
            this.barDom.style.fontSize = adaptiveNotyFont() + 'px';
        }
    }
}).show();

Такой подход обеспечивает, что уведомление всегда остаётся удобным для чтения, независимо от устройства.

Итоговые принципы адаптивной верстки

  • Использовать медиа-запросы для ширины, padding и размеров шрифта.
  • Менять расположение уведомлений динамически при изменении размера окна.
  • Применять кастомные классы для отдельных типов уведомлений.
  • Учитывать особенности анимации на мобильных устройствах.
  • Возможна динамическая подстройка стилей через JavaScript для более гибкой адаптивности.

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

Оглавление