Тип warning

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

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

Для создания уведомления используется конструктор Noty, куда передаётся объект конфигурации. Минимальный пример для типа warning выглядит так:

new Noty({
    type: 'warning',
    text: 'Это предупреждающее уведомление',
    timeout: 5000,
    progressBar: true,
    layout: 'topRight'
}).show();

Объяснение ключевых параметров:

  • type: 'warning' — определяет визуальный стиль уведомления. Для warning применяется желто-оранжевая цветовая схема по умолчанию.
  • text — содержимое уведомления, может включать HTML для форматирования.
  • timeout — время отображения в миллисекундах. Установив false, уведомление будет висеть до явного закрытия.
  • progressBar — отображение полосы прогресса, указывающей оставшееся время жизни уведомления.
  • layout — позиция на экране: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center.

Настройка внешнего вида

Noty позволяет кастомизировать стиль уведомлений через CSS. Для типа warning можно менять цвета, тени и анимацию:

.noty_type_warning {
    background-color: #f9c74f;
    color: #222;
    border-left: 5px solid #f9844a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}
  • background-color — основной цвет фона.
  • border-left — акцентная полоса слева, часто используется для визуального выделения предупреждения.
  • box-shadow — добавляет глубину уведомлению.
  • font-weight и color помогают сделать текст более читаемым.

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

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

let warningNoty = new Noty({
    type: 'warning',
    text: 'Обратите внимание!',
    timeout: 8000
});

warningNoty.on('onShow', function() {
    console.log('Уведомление warning показано');
});

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

warningNoty.show();

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

  • onShow — срабатывает при отображении уведомления.
  • onClose — срабатывает при закрытии уведомления.
  • onClick — реагирует на клик по уведомлению.
  • onHover и onUnhover — позволяют приостановить таймер закрытия при наведении мыши.

Автоматическое закрытие и ручное управление

Тип warning часто требует внимания, поэтому можно комбинировать автоматическое закрытие и возможность ручного закрытия:

new Noty({
    type: 'warning',
    text: 'Скоро действие будет отменено',
    timeout: 10000,   // автоматическое закрытие через 10 секунд
    closeWith: ['click', 'button']  // можно закрыть кликом или кнопкой
}).show();
  • closeWith — массив способов закрытия: 'click', 'button', 'hover', 'backdrop'.
  • Можно полностью отключить авто-таймер (timeout: false) для уведомлений, требующих подтверждения.

Использование HTML и кнопок

Noty позволяет добавлять интерактивные элементы внутрь уведомлений типа warning:

new Noty({
    type: 'warning',
    text: '<strong>Внимание!</strong> Продолжить действие?',
    timeout: false,
    buttons: [
        Noty.button('Да', 'btn btn-success', function() {
            console.log('Действие подтверждено');
            this.close();
        }),
        Noty.button('Нет', 'btn btn-danger', function() {
            console.log('Действие отменено');
            this.close();
        })
    ]
}).show();
  • buttons — массив кнопок с текстом, CSS-классами и функцией обратного вызова.
  • HTML внутри text позволяет выделять важные части текста.

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

Noty поддерживает анимацию появления и исчезновения уведомлений. Для типа warning можно использовать стандартные или кастомные эффекты:

new Noty({
    type: 'warning',
    text: 'Предупреждение с анимацией',
    animation: {
        open: 'animated fadeInDown', // animate.css классы
        close: 'animated fadeOutUp'
    }
}).show();
  • open — класс анимации появления.
  • close — класс анимации закрытия.
  • Анимация делает уведомления более заметными и плавными.

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

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

new Noty({
    type: 'warning',
    text: 'Первое предупреждение',
    layout: 'topRight'
}).show();

new Noty({
    type: 'warning',
    text: 'Второе предупреждение',
    layout: 'topRight'
}).show();
  • Уведомления будут располагаться одно под другим, формируя стек.
  • Можно настроить задержку между появлениями или ограничить количество одновременно отображаемых уведомлений через кастомный скрипт.

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

Для типа warning важно балансировать между заметностью и навязчивостью:

  • timeout: 3000 — короткое уведомление, легко игнорируемое.
  • timeout: 0 или false — уведомление остаётся до явного закрытия.
  • Использование прогресс-бара (progressBar: true) визуально показывает оставшееся время жизни.

Резюме визуальных особенностей

  • Основной цвет — жёлтый/оранжевый.
  • Акцентная полоса слева усиливает внимание.
  • Применяются анимации появления и закрытия.
  • Поддержка HTML и кнопок для интерактивности.
  • События жизненного цикла позволяют контролировать поведение уведомления.

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

Оглавление