Тема semanticui

Для использования библиотеки Noty вместе с Semantic UI необходимо подключить CSS и JS файлы обеих библиотек. В HTML-документе подключение может выглядеть следующим образом:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />

<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

Ключевой момент: выбор темы Noty влияет на визуальное оформление уведомлений. Для гармоничного сочетания с Semantic UI рекомендуется использовать тему mint или relax, так как они максимально нейтральны и легко интегрируются с компонентами UI.

Создание уведомления

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

new Noty({
    text: 'Сообщение успешно отправлено',
    type: 'success',
    theme: 'mint',
    layout: 'topRight',
    timeout: 3000,
    progressBar: true,
}).show();

Параметры:

  • text – текст уведомления. Поддерживается HTML-разметка.
  • type – тип уведомления: alert, success, error, warning, info.
  • theme – тема, влияющая на визуальный стиль.
  • layout – расположение: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.
  • timeout – время отображения в миллисекундах.
  • progressBar – отображение индикатора времени.

Использование Semantic UI классов внутри text позволяет стилизовать уведомление:

new Noty({
    text: '<div class="ui green message">Данные успешно сохранены</div>',
    type: 'success',
    theme: 'mint',
    layout: 'topRight',
    timeout: 4000,
}).show();

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

Noty поддерживает действия по клику и пользовательские кнопки. Для интеграции с Semantic UI удобно использовать их стиль кнопок:

new Noty({
    text: 'Вы хотите удалить элемент?',
    type: 'warning',
    theme: 'mint',
    layout: 'topCenter',
    modal: true,
    buttons: [
        Noty.button('Да', 'ui red button', function () {
            console.log('Элемент удалён');
            n.close();
        }),
        Noty.button('Нет', 'ui grey button', function () {
            console.log('Действие отменено');
            n.close();
        })
    ]
}).show();

Особенности:

  • Параметр modal: true делает уведомление модальным.
  • Классы Semantic UI ui red button, ui grey button применяются для кнопок уведомления.
  • Noty.button позволяет задавать текст, CSS-класс и функцию обратного вызова.

Настройка глобальных параметров Noty

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

Noty.overrideDefaults({
    theme: 'mint',
    layout: 'topRight',
    timeout: 3000,
    progressBar: true,
    closeWith: ['click', 'button']
});

Теперь все уведомления будут использовать заданные параметры, что упрощает интеграцию с UI.

Программное управление уведомлениями

Noty предоставляет методы для управления уведомлениями после создания:

let n = new Noty({
    text: 'Процесс выполняется',
    type: 'info',
    theme: 'mint',
    timeout: false,
}).show();

setTimeout(() => {
    n.setText('Процесс завершён');
    n.setType('success');
    n.close();
}, 5000);

Методы:

  • setText(text) – изменяет текст уведомления.
  • setType(type) – меняет тип уведомления.
  • close() – закрывает уведомление.
  • show() – открывает уведомление, если оно ещё не показано.

Интеграция с формами Semantic UI

Уведомления Noty удобно использовать для отображения состояния форм:

$('.ui.form').form({
    fields: {
        username: 'empty',
        email: ['empty', 'email']
    },
    onSuccess: function(event, fields) {
        event.preventDefault();
        new Noty({
            text: `<div class="ui green message">Форма отправлена успешно</div>`,
            type: 'success',
            theme: 'mint',
            timeout: 3000
        }).show();
    },
    onFailure: function(formErrors, fields) {
        new Noty({
            text: `<div class="ui red message">Ошибка при заполнении формы</div>`,
            type: 'error',
            theme: 'mint',
            timeout: 3000
        }).show();
    }
});

Примечания:

  • Возможность вставки HTML-классов Semantic UI обеспечивает единый стиль уведомлений и форм.
  • onSuccess и onFailure позволяют создавать динамические уведомления на основе состояния формы.

Анимации и пользовательские стили

Noty поддерживает CSS-анимации, которые можно комбинировать с классами Semantic UI:

new Noty({
    text: 'Элемент добавлен',
    type: 'success',
    theme: 'mint',
    layout: 'topRight',
    animation: {
        open: 'animated bounceInRight', // animate.css классы
        close: 'animated bounceOutRight'
    },
    timeout: 3000
}).show();

Важные моменты:

  • Необходимо подключить animate.css для использования готовых анимаций.
  • Классы Semantic UI можно использовать совместно с animate.css для гибкой стилизации уведомлений.

Работа с очередями уведомлений

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

let messages = ['Первое уведомление', 'Второе уведомление', 'Третье уведомление'];

messages.forEach(msg => {
    new Noty({
        text: `<div class="ui blue message">${msg}</div>`,
        type: 'info',
        theme: 'mint',
        timeout: 2000,
    }).show();
});

Особенности очередей:

  • Последующие уведомления появляются после закрытия предыдущих.
  • Можно изменить расположение через layout для управления видимостью нескольких уведомлений одновременно.

Настройка уведомлений с разными темами Semantic UI

Для разных типов уведомлений удобно применять соответствующие Semantic UI классы:

Тип Noty Класс Semantic UI
success ui green message
error ui red message
warning ui yellow message
info ui blue message
alert ui orange message

Применение этих классов внутри text обеспечивает полное соответствие визуальному стилю Semantic UI и единый дизайн интерфейса.

Оглавление