Переключение между темами

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

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

В примере выше используется тема mint. Noty поддерживает несколько встроенных тем: relax, metroui, mint, sunset и nest. Для подключения сторонних тем необходимо подключить соответствующий CSS-файл.

Подключение и регистрация новых тем

Чтобы использовать кастомные темы, требуется подключить CSS и, при необходимости, зарегистрировать тему в Noty:

<link rel="stylesheet" href="path/to/custom-theme.css">

После подключения можно указывать тему в параметре theme:

new Noty({
    text: 'Кастомная тема',
    theme: 'customTheme',
    type: 'success',
    timeout: 2500
}).show();

Noty автоматически применяет классы CSS, соответствующие указанной теме. В CSS-файле определяются правила для классов .noty_theme_name и дочерних элементов .noty_bar, .noty_text, .noty_close.

Динамическое переключение темы

Иногда требуется менять тему уведомлений во время работы приложения. Для этого создается экземпляр уведомления с одной темой и в процессе можно изменять её через метод setTheme:

let myNoty = new Noty({
    text: 'Динамическая тема',
    theme: 'relax',
    type: 'info',
    timeout: 4000
});

myNoty.show();

// Смена темы через 2 секунды
setTimeout(() => {
    myNoty.setTheme('mint');
}, 2000);

Метод setTheme заменяет текущую тему на новую, автоматически подгружая соответствующие CSS-классы. Это удобно, когда уведомления должны соответствовать изменяющемуся стилю интерфейса (например, тёмная/светлая тема приложения).

Связь темы с типами уведомлений

В Noty тип уведомления (alert, success, warning, error, info) и тема работают совместно. Важно учитывать, что некоторые темы содержат собственные стили для разных типов:

new Noty({
    text: 'Ошибка в системе',
    type: 'error',
    theme: 'metroui',
    timeout: 3000
}).show();

В данном примере тема metroui может изменить цветовую палитру ошибки и иконки, делая её визуально отличной от relax или mint.

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

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

function getThemeByUserPreference(pref) {
    switch(pref) {
        case 'light':
            return 'mint';
        case 'dark':
            return 'sunset';
        default:
            return 'relax';
    }
}

new Noty({
    text: 'Тема выбрана динамически',
    theme: getThemeByUserPreference(userTheme),
    type: 'info',
    timeout: 3500
}).show();

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

Взаимодействие темы с кастомными стилями

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

new Noty({
    text: '<b>Пользовательский стиль</b>',
    theme: 'relax',
    type: 'success',
    timeout: 3000,
    layout: 'topRight',
    progressBar: true,
    callbacks: {
        onTemplate: function() {
            this.barDom.classList.add('custom-noty-bar');
        }
    }
}).show();

Метод onTemplate позволяет получить доступ к DOM уведомления и добавить дополнительные классы, что обеспечивает гибкость кастомизации, сохраняя преимущества встроенной темы.

Использование анимаций с темами

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

new Noty({
    text: 'Анимация с темой',
    theme: 'sunset',
    type: 'info',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutRight'
    },
    timeout: 3000
}).show();

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

Лучшие практики при работе с темами

  • Использовать встроенные темы для быстрого прототипирования.
  • Создавать собственные темы через CSS для полного контроля визуального стиля.
  • Динамически менять тему через setTheme при смене режима интерфейса.
  • Проверять совместимость типа уведомления с темой, чтобы цвета и иконки отображались корректно.
  • Использовать onTemplate для добавления пользовательских стилей без изменения исходного CSS темы.
Оглавление