Message

Sahifaning yuqori qismida paydo bo'ladigan yengil toast bildirishnomasi. To'liq dasturiy — shablonda komponent kerak emas.

Basic

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

VxMessage('Default message')
VxMessage.success('Success message')
VxMessage.warning('Warning message')
VxMessage.danger('Danger message')
VxMessage.info('Info message')
</script>

Closable

Yopish tugmasini ko'rsatish uchun closable: true ni o'rnating.

VxMessage.success('File saved', { closable: true })

Plain Style

Rangli ikon va chegara bilan neytral fon uchun plain: true dan foydalaning.

VxMessage.success('Saved successfully', { plain: true })

Loading

Asinxron operatsiyalar uchun VxMessage.loading() dan foydalaning. Uni qo'lda yopmaguningizcha ko'rinadigan bo'lib turadi.

// Show loading, then swap to success
const handle = VxMessage.loading('Saving...')
await saveData()
handle.close()
VxMessage.success('Saved!')

// Or update in-place
const handle = VxMessage.loading('Uploading...')
await upload()
handle.update({ message: 'Upload complete!', type: 'success', duration: 2000 })

HTML Content

Xabarda HTML'ni render qilish uchun dangerouslyUseHTMLString: true ni o'rnating.

VxMessage({
  message: 'File <strong>report.pdf</strong> uploaded',
  type: 'success',
  dangerouslyUseHTMLString: true,
})

Action Button

action: { text, onClick } bilan qatordagi amal tugmasini qo'shing.

VxMessage({
  message: 'Email archived',
  duration: 5000,
  action: {
    text: 'Undo',
    onClick: () => restoreEmail(),
  },
})

Progress Bar

Vizual teskari hisobni ko'rsatish uchun showProgress: true ni o'rnating.

VxMessage.success('Auto-closing...', {
  showProgress: true,
  duration: 4000,
})

Custom Position

Xabarlar 6 ta holatda paydo bo'lishi mumkin. Oldindan ko'rish uchun istalgan zonani bosing.

VxMessage.info('Top left', { position: 'top-left' })
VxMessage.success('Bottom right', { position: 'bottom-right' })

Without Icon

VxMessage.success('No icon', { showIcon: false })

Custom Duration

duration ni ms da o'rnating. Doimiy xabar uchun 0 dan foydalaning (closable talab qilinadi).

VxMessage.info('Quick', { duration: 1000 })
VxMessage.warning('Persistent', { duration: 0, closable: true })

Custom Icon

icon parametri sifatida xom SVG satrini uzating.

VxMessage({
  message: 'Rocket launched!',
  type: 'info',
  icon: '<svg ...>...</svg>',
})

Grouping

Bir xil kontentga ega dublikat xabarlarni oldini olish uchun grouping: true dan foydalaning.

VxMessage.info('Only one shown', { grouping: true })

Update Existing

Faol xabarni yangilash uchun id dan foydalaning yoki handle'da update() ni chaqiring.

// Update by ID
VxMessage({ id: 'upload', message: 'Uploading...', type: 'loading' })
// Later...
VxMessage({ id: 'upload', message: 'Done!', type: 'success', duration: 2000 })

// Or via handle
const h = VxMessage.loading('Processing...')
h.update({ message: 'Complete!', type: 'success', duration: 2000 })

Max Count

VxMessage.config() dan foydalanib har bir holat uchun ko'rinadigan xabarlar sonini cheklang.

VxMessage.config({ max: 3 }) // only 3 visible at a time

Promise Support

Xabar yopilganidan keyin kodni ishga tushirish uchun .then() ni zanjirlang.

VxMessage.success('Step 1 complete', { duration: 2000 })
  .then(() => VxMessage.info('Moving to step 2...'))

Custom Style

Har bir vizual xususiyatni qayta belgilash mumkin: background, color, iconColor, borderColor, borderRadius, shadow, progressColor.

VxMessage({
  message: 'Fully customized',
  background: 'linear-gradient(135deg, #667eea, #764ba2)',
  color: '#fff',
  iconColor: '#fff',
  borderColor: 'transparent',
  borderRadius: '9999px',
  shadow: '0 4px 20px rgba(102,126,234,0.4)',
  progressColor: '#c4b5fd',
})

Close All

VxMessage.closeAll()

API

VxMessage(options)

Param	Type	Default	Description
message	string	—	Xabar matni (yoki satrni to'g'ridan-to'g'ri uzating)
type	'success' | 'warning' | 'danger' | 'info' | 'loading' | 'default'	'default'	Xabar turi
duration	number	3000	ms da avtomatik yopilish. 0 = avtomatik yopilmaydi
closable	boolean	false	Yopish tugmasini ko'rsatish
showIcon	boolean	true	Tur ikonini ko'rsatish
icon	Component | string	—	O'zgartirilgan ikon (Vue komponenti yoki SVG satri)
plain	boolean	false	Rangli ikon bilan neytral fon
position	'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right'	'top-center'	Ekrandagi joylashuv
showProgress	boolean	false	Vizual teskari hisob paneli
dangerouslyUseHTMLString	boolean	false	Xabarni HTML sifatida render qilish
action	{ text: string, onClick: () => void }	—	Qatordagi amal tugmasi
id	string	—	Mavjud xabarni qayta ishlatish/yangilash
grouping	boolean	false	Dublikat xabarlarni oldini olish
offset	number	16	Viewport chetidan masofa
background	string	—	O'zgartirilgan fon (rang, gradient)
color	string	—	O'zgartirilgan matn rangi
iconColor	string	—	O'zgartirilgan ikon rangi
borderColor	string	—	O'zgartirilgan chegara rangi
progressColor	string	—	O'zgartirilgan progress bar rangi
borderRadius	string	—	O'zgartirilgan burchak radiusi
shadow	string	—	O'zgartirilgan box-shadow
customClass	string	—	Qo'shimcha CSS klassi
customStyle	CSSStyleDeclaration	—	Qatordagi uslub qayta belgilashlari
onClose	() => void	—	Xabar yopilganida callback

Methods

VxMessage.success(message, options?)
VxMessage.warning(message, options?)
VxMessage.danger(message, options?)
VxMessage.info(message, options?)
VxMessage.loading(message, options?)  // duration defaults to 0
VxMessage.closeAll()
VxMessage.config({ max: 3 })          // limit visible count

Return Value

const handle = VxMessage.success('Done')
handle.close()                        // dismiss manually
handle.update({ message: 'Updated' }) // change content/type
handle.then(() => { /* ... */ })       // runs after close