Тема mint

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

new Noty({
    text: 'Привет, мир!',
    type: 'success',
    timeout: 3000,
    layout: 'topRight',
    theme: 'mint'
}).show();

Здесь ключевыми параметрами являются:

  • text — текст уведомления. Может содержать HTML-разметку.
  • type — тип уведомления (alert, success, warning, error, info).
  • timeout — время автоматического закрытия уведомления в миллисекундах. Значение false отключает автозакрытие.
  • layout — позиция уведомления на экране (top, topLeft, topCenter, topRight, center, bottom, bottomLeft, bottomCenter, bottomRight).
  • theme — визуальная тема уведомления. Тема mint предоставляет современный, минималистичный стиль с плавными градиентами и мягкими тенями.

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

Тема mint включает следующие особенности:

  • Плавные анимации появления и исчезновения уведомления.
  • Светлый фон с лёгким градиентом, который улучшает читаемость текста.
  • Акцентные цвета для разных типов уведомлений: зелёный для успеха, жёлтый для предупреждения, красный для ошибки, синий для информационных сообщений.
  • Чёткие закруглённые края и небольшие тени для визуального отделения от фона страницы.

Можно настроить тему индивидуально, переопределяя CSS-правила:

.noty_theme_mint {
    border-radius: 8px;
    font-family: 'Arial', sans-serif;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 15px 20px;
}
.noty_type_success {
    background: linear-gradient(45deg, #00c851, #007e33);
    color: white;
}
.noty_type_error {
    background: linear-gradient(45deg, #ff4444, #cc0000);
    color: white;
}

Типы уведомлений и их использование

Alert — базовое уведомление без специфического акцента. Используется для информирования пользователя о событиях.

Success — уведомление о успешном завершении действия. Обычно зелёного цвета.

Warning — предупреждающее уведомление о потенциальных проблемах. Чаще всего жёлтое.

Error — уведомление об ошибке, красного цвета, привлекающее внимание.

Info — информационное сообщение, синего цвета. Подходит для второстепенных уведомлений.

new Noty({
    text: 'Данные успешно сохранены!',
    type: 'success',
    theme: 'mint',
    timeout: 2500
}).show();

Управление временем и поведением

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

  • timeout — определяет, через сколько миллисекунд уведомление автоматически исчезнет.
  • progressBar — отображение полосы прогресса, показывающей оставшееся время до закрытия.
  • modal — если true, уведомление блокирует взаимодействие с остальной страницей.

Пример с прогресс-баром и модальным режимом:

new Noty({
    text: 'Загрузка данных...',
    type: 'info',
    theme: 'mint',
    timeout: 5000,
    progressBar: true,
    modal: true
}).show();

Анимации и позиции

Noty поддерживает различные типы анимаций при появлении и исчезновении:

  • open — анимация появления (animated fadeIn, animated bounceIn).
  • close — анимация исчезновения (animated fadeOut, animated bounceOut).
new Noty({
    text: 'Новый элемент добавлен',
    type: 'success',
    theme: 'mint',
    layout: 'topRight',
    animation: {
        open: 'animated fadeInRight',
        close: 'animated fadeOutRight'
    }
}).show();

Позиционирование осуществляется через параметр layout, который задаёт расположение на экране. В сочетании с темой mint уведомления выглядят аккуратно и не перекрывают основной контент страницы.

Пользовательские кнопки и события

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

new Noty({
    text: 'Вы уверены, что хотите удалить запись?',
    type: 'warning',
    theme: 'mint',
    buttons: [
        Noty.button('Да', 'btn btn-success', function(noty) {
            console.log('Запись удалена');
            noty.close();
        }),
        Noty.button('Нет', 'btn btn-error', function(noty) {
            noty.close();
        })
    ]
}).show();

Основные события, на которые можно подписаться:

  • onShow — срабатывает при отображении уведомления.
  • onClose — срабатывает при закрытии уведомления.
  • onClick — срабатывает при клике на уведомление.
new Noty({
    text: 'Кликните для подробностей',
    theme: 'mint',
    type: 'info',
    callbacks: {
        onClick: function() {
            console.log('Уведомление было кликнуто');
        }
    }
}).show();

Интеграция с современными фреймворками

Noty легко интегрируется с библиотеками типа Vue, React или Angular через стандартные вызовы JavaScript. Для динамических уведомлений можно использовать функции-обёртки, чтобы управлять уведомлениями через глобальный сервис.

function notify(message, type = 'info') {
    new Noty({
        text: message,
        type: type,
        theme: 'mint',
        timeout: 3000,
        layout: 'topRight'
    }).show();
}

notify('Новый пользователь зарегистрирован', 'success');

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

Оглавление