Alert

Компонент Alert в библиотеке Naive UI предназначен для отображения уведомлений и сообщений пользователю. Он поддерживает различные уровни важности и состояния, позволяет добавлять иконки, кнопки действий и управлять визуальным стилем через свойства и слоты. Alert является реактивным компонентом, полностью интегрируется с Vue 3 и использует Composition API.

Основные свойства

  • type (string) Определяет тип сообщения. Возможные значения:

    • info — информационное сообщение;
    • success — сообщение об успешном действии;
    • warning — предупреждение;
    • error — ошибка.

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

  • title (string | slot) Заголовок уведомления. Можно передавать строку или использовать слот для кастомного содержания.

  • description (string | slot) Тело сообщения. Поддерживает длинные тексты и HTML-контент через слот.

  • closable (boolean, по умолчанию false) Позволяет сделать уведомление закрываемым. При установке в true появляется кнопка закрытия.

  • onClose (function) Колбэк, вызываемый при закрытии уведомления. Используется для выполнения дополнительной логики, например, очистки состояния.

  • icon (boolean | slot) Позволяет отключить иконку (false) или задать собственный слот для кастомной иконки.

  • bordered (boolean, по умолчанию false) Отображение рамки вокруг уведомления.

  • showIcon (boolean, по умолчанию true) Управляет видимостью стандартной иконки.

Пример базового использования

<template>
  <n-alert
    type="success"
    title="Успешная операция"
    description="Данные успешно сохранены"
    closable
    @close="handleClose"
  />
</template>

<script setup>
function handleClose() {
  console.log('Alert закрыт');
}
</script>

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

Стилизация и темы

Alert поддерживает тёмную и светлую тему, которые настраиваются через глобальные параметры Naive UI. Для кастомизации цветов и отступов можно использовать свойства style и class:

<n-alert
  type="warning"
  title="Предупреждение"
  style="background-color: #fff3cd; color: #856404; border-radius: 8px;"
/>

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

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

Alert поддерживает несколько слотов для гибкой кастомизации:

  • title — для кастомного заголовка;
  • description — для кастомного описания;
  • icon — для своей иконки;
  • action — для кнопок действий или ссылок внутри уведомления.

Пример с кастомной кнопкой:

<n-alert type="info">
  <template #title>
    Информация
  </template>
  <template #description>
    Необходимо выполнить дополнительное действие.
  </template>
  <template #action>
    <n-button size="small" @click="performAction">Выполнить</n-button>
  </template>
</n-alert>

Адаптивность и позиционирование

Alert можно использовать внутри контейнеров и сеток, чтобы адаптировать уведомления под разные размеры экрана. Для глобальных уведомлений удобно сочетать с n-notification-provider, который управляет стеком уведомлений и их позиционированием.

Динамическое создание уведомлений

Через API useNotification можно создавать Alert программно, без прямого размещения в шаблоне:

import { useNotification } from 'naive-ui'

const notification = useNotification()

notification.info({
  title: 'Информационное сообщение',
  content: 'Это динамически созданное уведомление',
  duration: 3000
})

Параметр duration управляет временем отображения уведомления. Можно также использовать success, warning и error.

Комбинация с другими компонентами

Alert хорошо интегрируется с:

  • n-button — для действий внутри уведомления;
  • n-card — для вложенного уведомления в карточке;
  • n-space — для размещения нескольких Alert в одном ряду.

Рекомендации по использованию

  • Использовать type для визуальной дифференциации сообщений.
  • Для длинных текстов использовать description вместо title.
  • Для интерактивных уведомлений добавлять слот action с кнопками или ссылками.
  • Закрываемые Alert удобны для временных сообщений, но важные уведомления лучше не закрывать автоматически.

Итог

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

Оглавление