Функция template

Функция template является основным инструментом для кастомизации внешнего вида уведомлений в библиотеке Noty. Она отвечает за формирование HTML-разметки, которая отображается пользователю. Понимание работы с template позволяет создавать уведомления, полностью соответствующие дизайну приложения.

Основной синтаксис

template задаётся как строка HTML при создании экземпляра Noty:

new Noty({
    text: 'Сообщение',
    type: 'success',
    layout: 'topRight',
    theme: 'metroui',
    template: '<div class="custom-noty"><span class="custom-text">{text}</span></div>'
}).show();

В шаблоне могут использоваться следующие заполнители:

  • {text} — основной текст уведомления, переданный в параметре text.
  • {type} — тип уведомления (alert, success, warning, error, info).
  • {id} — уникальный идентификатор уведомления, генерируемый библиотекой.

Кастомизация структуры

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

template: `
<div id="noty-{id}" class="noty_bar noty_type_{type}">
    <div class="noty_message">
        <strong>{type}:</strong> {text}
        <button class="close-btn">&times;</button>
    </div>
</div>`
  • Элемент с классом noty_bar обязателен для корректной работы анимаций и позиционирования.
  • Дополнительные элементы (button, span, div) можно добавлять для расширения функционала уведомления.

Динамическое обновление контента

Noty поддерживает обновление текста уведомления после его создания с помощью метода update. Шаблон автоматически подставляет новые данные:

let n = new Noty({
    text: 'Загрузка...',
    template: '<div class="custom-noty">{text} <span class="loader"></span></div>'
}).show();

setTimeout(() => {
    n.setText('Загрузка завершена');
}, 2000);

Благодаря этому можно создавать динамические уведомления, которые меняют содержимое без перерисовки всего элемента.

Интеграция с темами

template тесно связан с темами Noty (theme). Для корректного отображения анимаций и стилей необходимо соблюдать следующие правила:

  • Сохранять базовую структуру noty_bar и noty_message.
  • Подставлять стандартные классы для типов уведомлений (noty_type_success, noty_type_error и т.д.).
  • Использовать собственные классы внутри этих элементов для дополнительной стилизации.

Пример комбинации темы и кастомного шаблона:

new Noty({
    text: 'Данные успешно сохранены',
    type: 'success',
    theme: 'mint',
    template: `
<div class="noty_bar noty_type_{type}">
    <div class="noty_message">
        <i class="icon-check"></i> {text}
    </div>
</div>`
}).show();

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

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

template: `
<div class="custom-noty">
    <img src="icon.png" alt="icon" class="noty-icon">
    <div class="noty-content">
        {text}
        <button class="accept-btn">Принять</button>
        <button class="decline-btn">Отказать</button>
    </div>
</div>`

В этом случае можно навешивать события на кнопки через onShow или через делегирование:

n.on('onShow', () => {
    document.querySelector('.accept-btn').addEventListener('click', () => n.close());
});

Важные моменты при использовании

  • Обязательные элементы: noty_bar и noty_message должны присутствовать для корректной работы встроенных функций Noty, таких как закрытие по клику и анимация.
  • Поддержка анимаций: кастомные элементы внутри шаблона не влияют на стандартные CSS-анимации, если базовая структура сохранена.
  • Масштабируемость: шаблон можно использовать как для одиночных уведомлений, так и для уведомлений с повторяющимся контентом, обеспечивая единый стиль для всей системы сообщений.

Применение JavaScript-шаблонов

Можно комбинировать строковый template с JavaScript-шаблонизацией:

let user = {name: 'Иван', action: 'создал новый файл'};
new Noty({
    text: `${user.name} ${user.action}`,
    template: `<div class="custom-noty">{text}</div>`
}).show();

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

Резюме возможностей

  • Полная кастомизация HTML уведомления.
  • Поддержка динамического обновления текста.
  • Интеграция с темами и типами уведомлений.
  • Возможность внедрения интерактивных элементов и компонентов.
  • Совместимость с анимациями и событиями Noty.

Функция template является ключевым инструментом для реализации сложных, визуально привлекательных и функциональных уведомлений в любых проектах на JavaScript.

Оглавление