Notification

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

Basic

<script setup>
import { VxNotification } from 'veloxui'

VxNotification.success('Saved', {
  message: 'Your changes have been saved.',
})
</script>

Title Only

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

VxNotification.success('File uploaded successfully')

Position

Уведомления могут появляться в 4 углах. Нажмите для предпросмотра.

VxNotification.info('Title', {
  message: 'Description',
  position: 'bottom-left',
})

With Action

Добавьте кнопку действия для взаимодействия с пользователем.

VxNotification({
  title: 'Update Available',
  message: 'Version 2.4.0 is ready.',
  type: 'info',
  action: {
    text: 'Update Now',
    onClick: () => installUpdate(),
  },
})

Progress Bar

VxNotification.info('Downloading', {
  message: 'Preparing file...',
  showProgress: true,
  duration: 5000,
})

HTML Content

VxNotification.info('New Comment', {
  message: '<strong>Alice</strong> commented...',
  dangerouslyUseHTMLString: true,
})

Persistent

Установите duration: 0 для уведомлений, которые остаются до ручного закрытия.

VxNotification.warning('Action Required', {
  message: 'Verify your email.',
  duration: 0,
})

Custom Duration

Without Icon

VxNotification({ title: 'Plain', showIcon: false })

onClick Callback

Сделайте всё уведомление кликабельным.

VxNotification.info('New message', {
  message: 'Click to view',
  onClick: () => router.push('/inbox'),
})

Update Existing

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

VxNotification({ id: 'deploy', title: 'Building...', type: 'info', duration: 0 })
// later...
VxNotification({ id: 'deploy', title: 'Deployed!', type: 'success', duration: 3000 })

Custom Style

Полностью настраивается: background, color, titleColor, iconColor, borderColor, borderRadius, shadow, progressColor.

VxNotification({
  title: 'Custom',
  message: 'Fully styled.',
  background: '#18181b',
  titleColor: '#fafafa',
  color: '#a1a1aa',
  iconColor: '#4ade80',
  borderColor: '#27272a',
})

Close All

VxNotification.closeAll()

Promise Support

VxNotification.success('Saved', { duration: 2000 })
  .then(() => VxNotification.info('Syncing...'))

API

VxNotification(options)

Param	Type	Default	Description
title	string	—	Заголовок уведомления (обязательный или передайте строку напрямую)
message	string	—	Текст описания
type	'success' | 'warning' | 'danger' | 'info' | 'default'	'default'	Тип уведомления
duration	number	4500	Автозакрытие в мс. 0 = постоянное
closable	boolean	true	Показывать кнопку закрытия
showIcon	boolean	true	Показывать иконку типа
icon	Component | string	—	Пользовательская иконка (строка SVG)
position	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'	Угловая позиция
showProgress	boolean	false	Визуальная полоса обратного отсчёта
dangerouslyUseHTMLString	boolean	false	Отрисовывать message как HTML
action	{ text, onClick }	—	Кнопка действия
id	string	—	Повторное использование/обновление существующего уведомления
onClick	() => void	—	Обработчик клика по всему уведомлению
background	string	—	Пользовательский фон
color	string	—	Пользовательский цвет текста сообщения
titleColor	string	—	Пользовательский цвет заголовка
iconColor	string	—	Пользовательский цвет иконки
borderColor	string	—	Пользовательский цвет границы
progressColor	string	—	Пользовательский цвет полосы прогресса
borderRadius	string	—	Пользовательский радиус скругления
shadow	string	—	Пользовательская тень
customClass	string	—	Дополнительный CSS-класс
customStyle	CSSStyleDeclaration	—	Переопределение inline-стилей
onClose	() => void	—	Колбэк при закрытии

Methods

VxNotification.success(title, options?)
VxNotification.warning(title, options?)
VxNotification.danger(title, options?)
VxNotification.info(title, options?)
VxNotification.closeAll()
VxNotification.config({ max: 5 })

Return Value

const handle = VxNotification.success('Done')
handle.close()
handle.update({ title: 'Updated', type: 'info' })
handle.then(() => { /* after close */ })