Создание кастомного шаблона

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

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

new Noty({
    text: 'Сообщение с кастомным шаблоном',
    type: 'alert',
    theme: 'mint',
    layout: 'topRight',
    timeout: 3000,
    template: `
        <div class="custom-noty">
            <div class="custom-header">Уведомление</div>
            <div class="custom-body">{text}</div>
            <button class="custom-close">×</button>
        </div>
    `
}).show();

В этом примере:

  • {text} автоматически заменяется на содержимое поля text.
  • Можно добавлять кнопки, элементы для анимации или дополнительные блоки с данными.

Использование классов для кастомного оформления

Для управления стилем уведомлений рекомендуется использовать собственные CSS-классы, назначенные в шаблоне. Пример:

.custom-noty {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.custom-header {
    font-weight: bold;
    margin-bottom: 8px;
}

.custom-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: #ecf0f1;
    font-size: 16px;
    cursor: pointer;
}

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

Динамические элементы внутри шаблона

Noty поддерживает динамическое обновление содержимого через {text} и дополнительные переменные, передаваемые при создании уведомления. Для динамического управления элементами можно использовать callbacks:

new Noty({
    text: 'Загрузка данных...',
    layout: 'topRight',
    theme: 'sunset',
    timeout: false,
    template: `
        <div class="loader-noty">
            <div class="loader-header">{text}</div>
            <div class="loader-progress"></div>
            <button class="loader-cancel">Отмена</button>
        </div>
    `,
    callbacks: {
        onTemplate: function() {
            const cancelBtn = this.barDom.querySelector('.loader-cancel');
            cancelBtn.addEventListener('click', () => this.close());
        }
    }
}).show();

Здесь:

  • this.barDom предоставляет доступ к DOM-элементу уведомления.
  • Можно навесить обработчики событий на любые элементы шаблона.

Интеграция иконок и изображений

Иконки и изображения делают уведомления более информативными. В шаблоне можно вставлять любые теги <img> или SVG:

template: `
    <div class="icon-noty">
        <img src="info-icon.svg" class="noty-icon">
        <span>{text}</span>
        <button class="noty-close">×</button>
    </div>
`

Стилизация может быть произвольной, включая анимации появления и исчезновения.

Анимации кастомных уведомлений

Для анимации рекомендуется использовать CSS-классы в сочетании с настройками Noty animation:

animation: {
    open: 'animate__animated animate__fadeInDown',
    close: 'animate__animated animate__fadeOutUp'
}

В кастомном шаблоне это работает без ограничений, позволяя создавать плавные эффекты при появлении и закрытии уведомлений.

Создание многофункциональных уведомлений

Кастомные шаблоны позволяют объединять текст, кнопки, индикаторы прогресса и интерактивные элементы. Например:

template: `
    <div class="multi-noty">
        <div class="multi-header">{text}</div>
        <progress value="0" max="100" class="multi-progress"></progress>
        <button class="multi-action">Действие</button>
        <button class="multi-close">×</button>
    </div>
`,
callbacks: {
    onTemplate: function() {
        const progress = this.barDom.querySelector('.multi-progress');
        const interval = setInterval(() => {
            progress.value += 10;
            if(progress.value >= 100) clearInterval(interval);
        }, 300);
        const actionBtn = this.barDom.querySelector('.multi-action');
        actionBtn.addEventListener('click', () => alert('Кнопка нажата!'));
        const closeBtn = this.barDom.querySelector('.multi-close');
        closeBtn.addEventListener('click', () => this.close());
    }
}

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

Практические советы

  • Всегда использовать уникальные классы внутри шаблона, чтобы стили не конфликтовали с другими элементами страницы.
  • Не полагаться только на {text}, а создавать отдельные блоки для сложной информации.
  • Использовать callbacks для навешивания событий, так как внутренние элементы создаются динамически.
  • Тестировать на разных устройствах, так как кастомные уведомления могут вести себя иначе в мобильных браузерах.

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

Оглавление