Полный список параметров

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

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

text

Описание: Основной текст уведомления. Может содержать HTML-разметку. Тип: string Пример использования:

text: 'Данные успешно сохранены!'
text: '<strong>Ошибка!</strong> Проверьте форму.'

type

Описание: Определяет визуальный стиль уведомления. Стандартные значения:

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

Пример:

type: 'success'

layout

Описание: Задает позицию уведомления на странице. Возможные значения:

  • top
  • topLeft
  • topCenter
  • topRight
  • center
  • centerLeft
  • centerRight
  • bottom
  • bottomLeft
  • bottomCenter
  • bottomRight

Пример:

layout: 'bottomRight'

theme

Описание: Тема оформления уведомления. Стандартные темы:

  • relax
  • mint
  • metroui
  • bootstrap-v4

Можно создавать собственные темы, подключая CSS.

theme: 'metroui'

timeout

Описание: Время жизни уведомления в миллисекундах. Тип: number или false (если нужно оставить уведомление до ручного закрытия).

timeout: 5000 // уведомление закроется через 5 секунд
timeout: false // уведомление останется до клика пользователя

progressBar

Описание: Включение или отключение полосы прогресса. Тип: boolean

progressBar: true

closeWith

Описание: Массив способов закрытия уведомления. Возможные значения:

  • click — клик по уведомлению
  • button — клик по кнопке закрытия
  • hover — при наведении
closeWith: ['click', 'button']

animation

Описание: Настройка анимаций появления и скрытия уведомления. Структура объекта:

animation: {
    open: 'animated fadeInDown', // класс для открытия
    close: 'animated fadeOutUp', // класс для закрытия
    easing: 'swing', // тип easing
    speed: 500 // скорость анимации в мс
}

Описание: Делает уведомление модальным, блокируя взаимодействие с другими элементами страницы. Тип: boolean

modal: true

killer

Описание: Если true, закрывает все другие уведомления при показе нового. Тип: boolean

killer: true

callbacks

Описание: Позволяет подписаться на события жизненного цикла уведомления.

  • onShow — при показе уведомления
  • onClose — при закрытии
  • afterShow — после полной анимации появления
  • afterClose — после полной анимации скрытия
callbacks: {
    onShow: function() { console.log('Уведомление показано'); },
    afterClose: function() { console.log('Уведомление закрыто'); }
}

buttons

Описание: Позволяет добавлять кастомные кнопки в уведомление. Структура:

buttons: [
    Noty.button('OK', 'btn btn-success', function(n) {
        console.log('Нажата кнопка OK');
        n.close();
    }),
    Noty.button('Отмена', 'btn btn-error', function(n) {
        n.close();
    })
]

sounds

Описание: Настройка звукового уведомления при показе. Не является встроенной функцией библиотеки, но легко реализуется через вызов аудио при событиях onShow.

callbacks: {
    onShow: function() {
        new Audio('sound.mp3').play();
    }
}

queue

Описание: Управление очередью уведомлений. Позволяет избежать наложения большого количества уведомлений. Пример:

queue: 'global'

maxVisible

Описание: Максимальное количество одновременно отображаемых уведомлений. Тип: number

maxVisible: 3

force

Описание: Если true, уведомление будет отображаться даже при уже существующем уведомлении того же типа. Тип: boolean

force: true

summary

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

Оглавление