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

В библиотеке Naive UI уведомления реализуются через компонент n-notification и соответствующий сервис useNotification. Базовый вызов уведомления выглядит следующим образом:

import { useNotification } from 'naive-ui'

const notification = useNotification()

notification.success({
  title: 'Успешно',
  content: 'Операция выполнена успешно'
})

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

Основные параметры уведомлений

Объект конфигурации уведомления поддерживает следующие ключевые параметры:

  • title — заголовок уведомления.
  • content — основное содержимое.
  • type — тип уведомления (success, warning, error, info), влияющий на цвет и иконку.
  • duration — время показа уведомления в миллисекундах. Значение 0 делает уведомление постоянным.
  • closable — логическое значение, показывать ли кнопку закрытия.
  • onClose — коллбэк, вызываемый при закрытии уведомления.
  • onClick — обработчик клика по уведомлению.

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

Кастомизация через рендер-функции

Naive UI предоставляет возможность использовать JSX или функции render для генерации содержимого уведомления. Это позволяет добавлять сложные структуры, кнопки и интерактивные элементы.

Пример кастомного уведомления с кнопкой действия:

notification.info({
  content: () => (
    <div style="display: flex; flex-direction: column; gap: 8px;">
      <span>Произошло обновление данных</span>
      <button
        onCl ick={() => console.log('Действие выполнено')}
        style="padding: 4px 8px; background-color: #409EFF; color: white; border: none; border-radius: 4px;"
      >
        Применить
      </button>
    </div>
  ),
  duration: 0,
  closable: true
})

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

Переопределение стилей уведомлений

Для изменения внешнего вида уведомлений используется CSS-переменные и scoped CSS. Основные переменные, влияющие на уведомления:

  • --n-notification-font-size — размер шрифта.
  • --n-notification-padding — внутренние отступы.
  • --n-notification-border-radius — скругление углов.
  • --n-notification-color-success, --n-notification-color-error и т.д. — цвета фона по типу уведомления.
  • --n-notification-icon-color — цвет иконки.

Пример переопределения стилей через style:

notification.warning({
  title: 'Внимание',
  content: 'Проверка данных не пройдена',
  style: {
    '--n-notification-font-size': '16px',
    '--n-notification-color-warning': '#FFA500',
    '--n-notification-border-radius': '12px'
  }
})

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

Расширенные возможности кастомизации

1. Кастомные иконки

По умолчанию иконки зависят от типа уведомления. Для замены используется параметр icon:

import { NIcon } from 'naive-ui'
import { CheckCircleOutline } from '@vicons/ionicons5'

notification.success({
  title: 'Готово',
  content: 'Данные успешно сохранены',
  icon: () => <NIcon component={CheckCircleOutline} />
})

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

2. Группировка уведомлений

Naive UI поддерживает отображение нескольких уведомлений одновременно. Для удобного управления группой уведомлений используется placement:

notification.success({
  title: 'Загрузка завершена',
  content: 'Файлы сохранены',
  placement: 'top-right'
})

notification.error({
  title: 'Ошибка',
  content: 'Не удалось сохранить изменения',
  placement: 'top-right'
})

Параметр placement принимает значения: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'. Группировка позволяет создавать более аккуратный и организованный интерфейс уведомлений.

3. Пользовательские действия при закрытии

Для реализации сложной логики закрытия уведомления, используется onClose:

notification.info({
  title: 'Информация',
  content: 'Вы уверены, что хотите продолжить?',
  closable: true,
  onClose: () => {
    console.log('Пользователь закрыл уведомление')
  }
})

Этот подход полезен для подтверждений, очистки состояния или синхронизации с внешними процессами.

Создание собственного шаблона уведомления

Можно полностью переопределить шаблон уведомления через notification с render:

notification.info({
  render: () => (
    <div style="display: flex; align-items: center; gap: 12px;">
      <img src="/icons/info.svg" style="width: 24px; height: 24px;" />
      <div>
        <strong>Обновление доступно</strong>
        <p>Нажмите, чтобы установить последнюю версию</p>
      </div>
      <button style="margin-left: auto;" onCl ick={() => console.log('Установка')}>
        Установить
      </button>
    </div>
  ),
  duration: 0
})

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

Практические рекомендации

  • Использовать рендер-функции для уведомлений, которые требуют интерактивности или сложной разметки.
  • Настраивать темы и CSS-переменные для согласованного визуального стиля.
  • Контролировать время показа и закрытие уведомлений через duration и onClose.
  • Группировать уведомления по placement для более чистого UI.
  • Для сложных иконок и кастомных элементов применять отдельные компоненты с icon и render.

Эти методы обеспечивают максимально гибкую кастомизацию уведомлений в Naive UI и позволяют адаптировать их под любой дизайн-проект.

Оглавление