Создание кастомных типов

Библиотека Noty предоставляет встроенные типы уведомлений: alert, success, error, warning, information. Однако для сложных проектов часто требуется создавать кастомные типы, которые имеют собственный стиль, иконки и поведение. Для этого Noty использует возможность расширения через объект Noty.overrideDefaults или напрямую через CSS-классы.

Определение нового типа

Кастомный тип задаётся через поле type в конфигурации уведомления. Чтобы добавить новый тип, нужно:

  1. Определить уникальный класс CSS, который будет отвечать за визуальную часть уведомления.
  2. Использовать этот класс в конфигурации Noty.

Пример создания кастомного типа info-dark:

new Noty({
    type: 'info-dark',
    text: 'Это уведомление с тёмным фоном и кастомным стилем',
    timeout: 3000,
    layout: 'topRight'
}).show();

Здесь type: 'info-dark' — это имя кастомного типа, который необходимо описать в CSS.

Стилизация кастомного типа через CSS

Для корректного отображения кастомного типа необходимо создать CSS-класс с именем noty_type_<имя_типа>:

.noty_type_info-dark {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-left: 5px solid #3498db;
    font-weight: 500;
}

.noty_type_info-dark .noty_close {
    color: #ecf0f1;
}

Ключевые моменты:

  • Все кастомные типы должны начинаться с noty_type_.
  • Можно полностью переопределить стили по желанию: фон, цвет текста, тени, анимацию.
  • Для иконок или дополнительных элементов можно использовать псевдоэлементы ::before и ::after.

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

Noty не имеет встроенной поддержки иконок для кастомных типов, поэтому иконки добавляются через CSS или HTML в text.

Через CSS:

.noty_type_info-dark::before {
    content: 'ℹ️';
    margin-right: 10px;
    font-size: 18px;
}

Через HTML в текст уведомления:

new Noty({
    type: 'info-dark',
    text: '<span class="icon">ℹ️</span> Кастомное уведомление с иконкой',
    timeout: 4000
}).show();

Кастомизация поведения уведомлений

Кастомные типы могут иметь свои уникальные параметры поведения:

Noty.overrideDefaults({
    callbacks: {
        onClose: function() {
            console.log('Кастомное уведомление закрыто');
        },
        onShow: function() {
            console.log('Кастомное уведомление показано');
        }
    }
});

Также можно задать собственные timeout, animation, layout:

new Noty({
    type: 'info-dark',
    text: 'Уведомление с кастомной анимацией',
    layout: 'bottomLeft',
    timeout: 5000,
    animation: {
        open: 'animated bounceInLeft',
        close: 'animated bounceOutRight'
    }
}).show();

Важно: animation может использовать как встроенные классы, так и сторонние библиотеки анимаций, например Animate.css.

Массовое создание кастомных типов

Если проект требует несколько кастомных типов, удобнее определить функцию-конструктор:

function createCustomNoty(typeName, options = {}) {
    return function(text) {
        return new Noty({
            type: typeName,
            text: text,
            ...options
        }).show();
    }
}

// Создание нескольких кастомных уведомлений
const darkInfo = createCustomNoty('info-dark', {layout: 'topRight', timeout: 3000});
const successGreen = createCustomNoty('success-green', {layout: 'topLeft', timeout: 4000});

darkInfo('Тёмное информационное уведомление');
successGreen('Успешное уведомление с зелёным цветом');

Поддержка тем и глобальные стили

Кастомные типы удобно использовать совместно с темами Noty. Для этого в CSS создаются глобальные правила:

.noty_theme_mint .noty_type_info-dark {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Это позволяет сохранять консистентность дизайна независимо от темы и использовать кастомные типы в разных частях приложения без дублирования кода.

Итоги по созданию кастомных типов

  • Определяется уникальное имя типа в конфигурации уведомления.
  • Создаётся CSS-класс с префиксом noty_type_ для кастомного вида.
  • Иконки и дополнительные элементы добавляются через CSS или HTML.
  • Поведение уведомлений можно задавать через timeout, callbacks и animation.
  • Удобно создавать функции-конструкторы, если нужно много кастомных типов.
  • Совместимость с темами позволяет стандартизировать стили во всём проекте.

Кастомные типы делают Noty гибким инструментом для проектов с уникальными требованиями к интерфейсу и UX.

Оглавление