Notification

Ekran chetidan sirgʻalib chiqadigan boy notification paneli. Sarlavha, tavsif, ikonkalar, amallar va toʻliq moslashtirishni qoʻllab-quvvatlaydi. Hover qilinganda kartochkalar kabi ustma-ust terilib turadi.

Basic

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

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

Title Only

Faqat sarlavhali notification uchun shunchaki string uzating.

VxNotification.success('File uploaded successfully')

Position

Notificationlar 4 ta burchakda paydo boʻlishi mumkin. Koʻrish uchun bosing.

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

With Action

Foydalanuvchi bilan oʻzaro aloqa uchun amal tugmasini qoʻshing.

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

Qoʻlda yopilmaguncha turadigan notificationlar uchun duration: 0 ni belgilang.

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

Custom Duration

Without Icon

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

onClick Callback

Butun notificationni bosiladigan qiling.

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

Update Existing

Jonli notificationni yangilash uchun id dan foydalaning.

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

Custom Style

Toʻliq moslashtiriladi: 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	—	Notification sarlavhasi (majburiy yoki toʻgʻridan-toʻgʻri string uzating)
message	string	—	Tavsif matni
type	'success' | 'warning' | 'danger' | 'info' | 'default'	'default'	Notification turi
duration	number	4500	Avtomatik yopilish ms. 0 = doimiy
closable	boolean	true	Yopish tugmasini koʻrsatish
showIcon	boolean	true	Turga mos ikonkani koʻrsatish
icon	Component | string	—	Maxsus ikonka (SVG string)
position	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'	Burchak joylashuvi
showProgress	boolean	false	Vaqt sanoq progress bari
dangerouslyUseHTMLString	boolean	false	Xabarni HTML sifatida render qilish
action	{ text, onClick }	—	Amal tugmasi
id	string	—	Mavjud notificationni qayta ishlatish/yangilash
onClick	() => void	—	Butun notification uchun click handler
background	string	—	Maxsus fon
color	string	—	Maxsus xabar matni rangi
titleColor	string	—	Maxsus sarlavha rangi
iconColor	string	—	Maxsus ikonka rangi
borderColor	string	—	Maxsus chegara rangi
progressColor	string	—	Maxsus progress bar rangi
borderRadius	string	—	Maxsus border radius
shadow	string	—	Maxsus box-shadow
customClass	string	—	Qoʻshimcha CSS klass
customStyle	CSSStyleDeclaration	—	Inline style’larni bekor qilish
onClose	() => void	—	Yopilganda callback

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 */ })