Тема metroui

Noty — это легковесная библиотека для отображения уведомлений в веб-приложениях. Одной из встроенных тем оформления является Metroui, вдохновлённая современным минималистичным интерфейсом, которая позволяет создавать лаконичные и визуально привлекательные уведомления.

Подключение и настройка темы Metroui

Для использования темы Metroui необходимо подключить CSS и JS файлы Noty, а также указать theme: 'metroui' при создании уведомления:

new Noty({
    text: 'Пример уведомления Metroui',
    theme: 'metroui',
    type: 'alert',
    timeout: 3000,
    layout: 'topRight'
}).show();

Ключевые параметры:

  • text — текст уведомления.
  • theme — тема оформления (metroui).
  • type — тип уведомления: alert, success, error, warning, information.
  • timeout — время автоматического скрытия уведомления в миллисекундах.
  • layout — положение уведомления на экране: top, topLeft, topRight, bottom, bottomLeft, bottomRight, center.

Типы уведомлений и визуальные различия

Метод type определяет цвет и иконку уведомления:

  • alert — серое нейтральное уведомление.
  • success — зелёное уведомление, сигнализирующее об успешной операции.
  • error — красное уведомление с сигналом об ошибке.
  • warning — оранжевое уведомление с предупреждением.
  • information — синее уведомление для информирования.

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

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

Layout и позиционирование: Noty поддерживает гибкое позиционирование уведомлений. Параметр layout задаёт точку отображения, а queue и maxVisible управляют количеством одновременно видимых уведомлений.

Пример:

new Noty({
    text: 'Несколько уведомлений в правом верхнем углу',
    theme: 'metroui',
    type: 'information',
    layout: 'topRight',
    queue: 'global',
    maxVisible: 3
}).show();

Timeout и sticky:

  • timeout автоматически скрывает уведомление через заданное время.
  • sticky: true делает уведомление постоянным до закрытия пользователем.

Использование событий

Noty предоставляет множество событий, которые можно использовать для расширенной логики:

let n = new Noty({
    text: 'Уведомление с событиями',
    theme: 'metroui',
    type: 'success',
    layout: 'topRight'
});

n.on('onShow', function() {
    console.log('Уведомление отображается');
});

n.on('onClose', function() {
    console.log('Уведомление закрыто');
});

n.show();

Основные события:

  • onShow — уведомление появляется на экране.
  • onClose — уведомление скрывается.
  • onClick — пользователь кликнул на уведомление.
  • onHover / onUnhover — события наведения и ухода курсора.

Кастомизация внешнего вида

Тема Metroui допускает простую кастомизацию через CSS. Можно менять цвета, шрифты, отступы и анимацию. Основные классы:

  • .noty_type_alert, .noty_type_success, .noty_type_error — стили для типов уведомлений.
  • .noty_body — контейнер текста уведомления.
  • .noty_bar — базовый контейнер уведомления с фоном и рамкой.
  • .noty_close — кнопка закрытия уведомления.

Пример изменения цвета фона:

.noty_theme_metroui .noty_type_success {
    background-color: #4caf50;
    color: #fff;
}

Анимация уведомлений

Noty поддерживает встроенные анимации open и close через CSS классы или JavaScript. Тема Metroui использует плавное появление и исчезновение уведомлений, но их можно изменить:

new Noty({
    text: 'Анимированное уведомление',
    theme: 'metroui',
    type: 'information',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    }
}).show();

Использование CSS-анимаций позволяет интегрировать любую библиотеку анимаций, например Animate.css, для более выразительных уведомлений.

Группировка и очереди уведомлений

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

  • queue: 'global' — все уведомления используют одну очередь.
  • queue: 'custom' — отдельная очередь для специфических уведомлений.
new Noty({
    text: 'Уведомление в отдельной очереди',
    theme: 'metroui',
    queue: 'custom',
    type: 'warning'
}).show();

Интерактивные уведомления

Можно добавлять кнопки или элементы управления прямо в уведомление:

new Noty({
    text: 'С уведомлением можно взаимодействовать',
    theme: 'metroui',
    type: 'alert',
    buttons: [
        Noty.button('ОК', 'btn-ok', function() {
            console.log('Нажата кнопка ОК');
        }),
        Noty.button('Отмена', 'btn-cancel', function() {
            this.close();
        })
    ]
}).show();

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

Интеграция с динамическим контентом

Noty совместим с динамически загружаемыми данными. Например, можно показывать уведомления при успешном завершении AJAX-запроса:

fetch('/api/data')
    .then(res => res.json())
    .then(data => {
        new Noty({
            text: `Данные загружены: ${data.count}`,
            theme: 'metroui',
            type: 'success'
        }).show();
    })
    .catch(err => {
        new Noty({
            text: `Ошибка загрузки данных`,
            theme: 'metroui',
            type: 'error'
        }).show();
    });

Методика интеграции с AJAX делает Noty мощным инструментом для современных одностраничных приложений.

Поддержка мобильных устройств

Тема Metroui адаптивна, уведомления автоматически корректируют размер и позицию под мобильные экраны. Для оптимизации можно использовать CSS медиа-запросы для изменения шрифта или ширины:

@media (max-width: 600px) {
    .noty_theme_metroui .noty_bar {
        width: 90%;
        font-size: 14px;
    }
}

Это обеспечивает удобное отображение уведомлений на смартфонах и планшетах без дополнительных библиотек.

Noty с темой Metroui предоставляет широкий спектр возможностей: минималистичный дизайн, гибкие позиции, анимации, события и интерактивные элементы. Его настройка через JavaScript и CSS позволяет легко интегрировать уведомления в любое современное веб-приложение, сохраняя единый стиль интерфейса.

Оглавление