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

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

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

Параметр type

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

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

Каждый тип автоматически получает цветовую схему, определяемую текущей темой.

Параметр theme

theme задаёт глобальный стиль уведомления. В Noty встроено несколько тем:

  • mint — минималистичный стиль с мягкими оттенками.
  • relax — спокойные цвета и округлые углы.
  • metroui — строгий и современный вид в стиле Metro.
  • sunset — тёплая цветовая гамма.
  • nest — стиль с тенями и плавными градиентами.

Тема влияет на фон, цвет текста, кнопки закрытия и рамки уведомления. Для создания уникального внешнего вида можно использовать кастомные темы через CSS, подключая свои стили с классом .noty_theme_custom.

Расположение уведомлений (layout)

layout определяет место появления уведомления на странице:

  • top — сверху, по центру.
  • topLeft — верхний левый угол.
  • topCenter — верхний центр.
  • topRight — верхний правый угол.
  • center — по центру экрана.
  • bottom — снизу по центру.
  • bottomLeft — нижний левый угол.
  • bottomCenter — нижний центр.
  • bottomRight — нижний правый угол.

Комбинация theme и layout позволяет создавать уведомления, гармонирующие с дизайном сайта.

Кастомизация текста и HTML

Свойство text поддерживает HTML, что позволяет вставлять ссылки, кнопки или иконки:

new Noty({
    text: '<strong>Успешно!</strong> Данные сохранены. <a href="#">Посмотреть</a>',
    type: 'success',
}).show();

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

Анимации появления и скрытия (animation)

Noty поддерживает плавные анимации, задаваемые объектом animation:

animation: {
    open: 'animated bounceInRight',
    close: 'animated bounceOutRight',
    easing: 'swing',
    speed: 500
}
  • open и close — классы анимаций для появления и исчезновения уведомления.
  • easing — функция сглаживания движения.
  • speed — длительность анимации в миллисекундах.

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

Панель прогресса (progressBar)

Параметр progressBar отображает индикатор времени жизни уведомления. При значении true появляется полоска, показывающая оставшееся время до исчезновения уведомления. Стиль прогресс-бара можно менять через CSS темы:

.noty_type_success .noty_bar {
    background-color: #4caf50;
}

Размеры и адаптивность

Noty автоматически адаптируется под размеры экрана, однако можно задать собственные ширину и высоту через CSS:

.noty {
    width: 350px;
    max-width: 90%;
}

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

Кнопки и элементы управления

Кнопки добавляются через массив buttons, каждая из которых может иметь собственный стиль и поведение:

buttons: [
    Noty.button('Да', 'btn btn-success', function() {
        console.log('Подтверждено');
        n.close();
    }),
    Noty.button('Отмена', 'btn btn-error', function() {
        n.close();
    })
]

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

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

Для более точного контроля можно использовать CSS переменные темы Noty, например:

:root {
    --noty-color-success: #2ecc71;
    --noty-color-error: #e74c3c;
    --noty-font-size: 16px;
}

Переменные позволяют изменять цвета, шрифты и отступы глобально, не переписывая отдельные классы.

Итоговое сочетание параметров

Эффективная настройка внешнего вида уведомлений достигается комбинированием:

  • type + theme — для базового визуального стиля.
  • layout — для позиционирования на странице.
  • animation — для динамики появления/исчезновения.
  • progressBar и buttons — для интерактивности и информативности.
  • CSS-переменные и кастомные темы — для полного контроля над визуальной частью.

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

Оглавление