Тема relax

Библиотека Noty предназначена для создания уведомлений в веб-приложениях с гибкой кастомизацией внешнего вида, анимаций и поведения. Она облегчает добавление всплывающих сообщений без необходимости ручного написания HTML и CSS для каждого уведомления.

Создание базового уведомления выполняется с помощью конструктора new Noty():

new Noty({
    text: 'Привет, это уведомление!',
    type: 'alert',
    timeout: 3000
}).show();

Ключевые параметры конструктора:

  • text — содержимое уведомления (может содержать HTML).
  • type — тип уведомления: alert, success, warning, error, info.
  • timeout — время жизни уведомления в миллисекундах; если false, уведомление будет ждать явного закрытия.
  • layout — позиция на экране: top, topLeft, topRight, bottom, bottomLeft, bottomRight, center.
  • theme — визуальный стиль уведомления (например, mint, metroui, relax).

Настройка темы Relax

Тема relax создаёт мягкий, ненавязчивый стиль уведомлений с плавными анимациями появления и скрытия. Для её использования достаточно указать параметр theme: 'relax':

new Noty({
    text: 'Это уведомление с темой relax',
    type: 'info',
    layout: 'topRight',
    theme: 'relax',
    timeout: 4000
}).show();

Особенности темы relax:

  • Использует светлые, спокойные цвета.
  • Плавное появление и исчезновение уведомления.
  • Чёткая типизация по цвету: success — зелёный, error — красный, warning — оранжевый, info — синий.
  • Минималистичный дизайн кнопок закрытия.

Типы уведомлений

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

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

Пример с разными типами:

const types = ['alert', 'success', 'error', 'warning', 'info'];

types.forEach(type => {
    new Noty({
        text: `Уведомление типа ${type}`,
        type: type,
        theme: 'relax',
        timeout: 3000
    }).show();
});

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

Параметр timeout задаёт автоматическое закрытие уведомления. Для полной ручной контроля можно использовать false:

let n = new Noty({
    text: 'Закрой меня вручную',
    theme: 'relax',
    timeout: false
}).show();

setTimeout(() => n.close(), 5000); // закроется через 5 секунд программно

Дополнительно, Noty поддерживает методы управления уведомлением:

  • show() — отобразить уведомление.
  • close() — закрыть уведомление.
  • setText(newText) — изменить текст уведомления динамически.
  • setType(newType) — изменить тип уведомления на лету.

Layout и позиционирование

Noty позволяет размещать уведомления в разных частях экрана с помощью параметра layout:

  • top, topLeft, topRight
  • bottom, bottomLeft, bottomRight
  • center, inline

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

new Noty({
    text: 'Центральное уведомление',
    theme: 'relax',
    layout: 'center',
    timeout: 3500
}).show();

Пользовательские кнопки и действия

В теме relax удобно добавлять интерактивные элементы через массив buttons. Каждая кнопка создаётся с помощью функции Noty.button:

let n = new Noty({
    text: 'Согласны с условиями?',
    theme: 'relax',
    buttons: [
        Noty.button('Да', 'btn-success', function () {
            console.log('Пользователь согласился');
            n.close();
        }),
        Noty.button('Нет', 'btn-error', function () {
            console.log('Пользователь отказался');
            n.close();
        })
    ]
}).show();

Параметры кнопок:

  • label — текст кнопки.
  • className — CSS-класс для стилизации.
  • callback — функция, выполняемая при нажатии.

Анимации и события

Тема relax имеет предустановленные плавные анимации, но их можно кастомизировать через animation:

new Noty({
    text: 'Пользовательская анимация',
    theme: 'relax',
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp',
        easing: 'swing',
        speed: 500
    }
}).show();

Noty поддерживает события жизненного цикла:

  • onShow — срабатывает при появлении уведомления.
  • onClose — при закрытии уведомления.
  • onClick — при клике на уведомление.
  • onHover / onMouseEnter / onMouseLeave — события наведения мыши.

Пример с событиями:

new Noty({
    text: 'Наведи на меня',
    theme: 'relax',
    timeout: 5000,
    callbacks: {
        onShow: () => console.log('Показано уведомление'),
        onClose: () => console.log('Уведомление закрыто')
    }
}).show();

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

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

Noty.overrideDefaults({
    layout: 'topRight',
    theme: 'relax',
    queue: 'global'
});

new Noty({text: 'Первое уведомление'}).show();
new Noty({text: 'Второе уведомление'}).show();

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

Поддержка HTML и кастомного контента

Уведомления relax могут содержать HTML, что позволяет добавлять ссылки, изображения и сложные блоки:

new Noty({
    text: '<strong>Важно!</strong> Проверьте <a href="#">новые данные</a>',
    theme: 'relax',
    type: 'warning',
    timeout: 5000
}).show();

Можно также создавать полностью кастомные элементы через type: 'alert' и вставку HTML внутри text.

Интеграция с другими библиотеками

Noty легко интегрируется с jQuery, React, Vue или Vanilla JS. Для React или Vue обычно используют вызовы Noty через события компонента или хук, сохраняя возможность изменять текст и тип уведомления динамически.

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

Оглавление