VeloxUI

O'zbekcha

English
Русский

O'zbekcha

English
Русский

Appearance

Alert ​

Muhim xabarlar va bildirishnomalarni ko'rsatadi. Soft, solid, outline va accent variantlari bilan success, warning, danger, info turlarini qo'llab-quvvatlaydi. Progress bilan avtomatik yopilish, yig'iladigan kontent, loading holati, maxsus ranglar, marquee matn va alert to'plashni o'z ichiga oladi.

Basic ​

vue
<VxAlert title="Info — Bu ma'lumot beruvchi alert." type="info" />
<VxAlert title="Success — Sizning o'zgarishlaringiz saqlandi." type="success" />
<VxAlert title="Warning — Davom etishdan oldin tekshiring." type="warning" />
<VxAlert title="Danger — Nimadir noto'g'ri ketdi." type="danger" />

With Description ​

vue
<VxAlert
  type="success"
  title="Deployment bajarildi"
  description="Ilovangiz production ga muvaffaqiyatli yuklandi."
/>

Closable ​

vue
<VxAlert type="info" title="Bu alertni yopishingiz mumkin." closable />

Solid Variant ​

vue
<VxAlert type="info" variant="solid" title="Yangi versiya mavjud." />
<VxAlert type="success" variant="solid" title="Barcha tizimlar ishlamoqda." />
<VxAlert type="warning" variant="solid" title="API tezlik chegarasi yaqinlashmoqda." />
<VxAlert type="danger" variant="solid" title="Xizmat to'xtashi aniqlandi." />

Outline Variant ​

vue
<VxAlert type="info" variant="outline" title="Maslahat — Klaviatura yorliqlaridan foydalaning." />
<VxAlert type="success" variant="outline" title="Tasdiqlandi — Email tasdiqlandi." />

Accent Variant ​

Chap tomonda rangli chegara chizig'i — callout va yon izohlar uchun juda mos keladi.

vue
<VxAlert type="info" variant="accent" title="Eslatma"
  description="Bu xususiyat hozirda beta holatida." />
<VxAlert type="danger" variant="accent" title="Muhim"
  description="Hisobingizni o'chirish doimiydir." />

Auto-close with Progress Bar ​

Avtomatik yopish uchun duration (ms da) ni o'rnating. Hover taymerni to'xtatadi.

vue
<VxAlert
  type="success"
  title="Saqlandi! Bu alert 8 soniyada yopiladi."
  :duration="8000"
  closable
/>

Collapsible ​

Tavsifni kengaytirish yoki yig'ish uchun sarlavhani bosing.

vue
<VxAlert
  type="info"
  title="v2.4.0 relizi yozuvlari"
  description="Yangi xususiyatlar dark mode qo'llab-quvvatlashni o'z ichiga oladi..."
  collapsible
/>

Loading State ​

Kutilayotgan operatsiyani ko'rsatish uchun ikonkani spinner bilan almashtiradi.

vue
<VxAlert type="info" title="Fayllar yuklanmoqda..."
  description="5 tadan 3 ta fayl yuklandi." loading />

Custom Color ​

Turdan qat'iy nazar har qanday maxsus rangni qo'llash uchun color prop idan foydalaning.

vue
<VxAlert title="Maxsus siyoh rangli alert" color="#8b5cf6" />
<VxAlert title="Maxsus teal solid" variant="solid" color="#14b8a6" />
<VxAlert title="Maxsus pushti outline" variant="outline" color="#ec4899" />
<VxAlert title="Maxsus to'q sariq accent" variant="accent" color="#f97316" />

Marquee (Scrolling Text) ​

Banner e'lonlari uchun aylanuvchi matn. Tezlikni boshqarish uchun marquee-speed dan foydalaning (standart 50).

vue
<VxAlert
  type="warning"
  variant="solid"
  banner
  marquee
  title="Cheklangan muddatli taklif — Barcha yillik tariflarga 50% chegirma!"
/>

Alert Group (Stacking) ​

VxAlertGroup alert lar kirish/chiqish o'tishlarini animatsiyalashtiradi. Alert larni dinamik ravishda qo'shing va olib tashlang.

vue
<script setup>
import { ref } from 'vue'
import { VxAlert, VxAlertGroup, VxButton } from 'veloxui'

const alerts = ref([
  { id: 1, type: 'info', title: 'Notification', desc: 'You have a new message.' },
  { id: 2, type: 'success', title: 'Saved', desc: 'Changes saved.' },
])

function removeAlert(id) {
  alerts.value = alerts.value.filter(a => a.id !== id)
}
</script>

<template>
  <VxAlertGroup>
    <VxAlert
      v-for="a in alerts"
      :key="a.id"
      :type="a.type"
      :title="a.title"
      :description="a.desc"
      closable
      @close="removeAlert(a.id)"
    />
  </VxAlertGroup>
</template>

Without Icon ​

vue
<VxAlert type="info" title="Ikonkasiz alert." :show-icon="false" />

Centered ​

vue
<VxAlert type="info" title="Markazlashtirilgan alert kontenti." center />
vue
<VxAlert type="warning" variant="solid" title="Bugun kechasi texnik xizmat." banner closable center />

With Action Slot ​

vue
<VxAlert type="info" title="Yangi dasturiy ta'minot yangilanishi mavjud.">
  <template #action>
    <VxButton size="sm" variant="outline">Hozir yangilash</VxButton>
  </template>
</VxAlert>

API ​

VxAlert Props ​

PropTypeDefaultDescription
type'default' | 'success' | 'warning' | 'danger' | 'info''info'Alert turi
variant'soft' | 'solid' | 'outline' | 'accent''soft'Vizual uslub
titlestring—Alert sarlavha matni
descriptionstring—Alert tavsifi matni
closablebooleanfalseYopish tugmasini ko'rsatish
show-iconbooleantrueTur ikonkasini ko'rsatish
iconstring | Component—Maxsus ikonka (standartni qayta aniqlaydi)
bannerbooleanfalseTo'liq kenglikdagi banner rejimi
centerbooleanfalseKontentni markazlashtirish
durationnumber0N ms dan keyin avtomatik yopish (0 = o'chirilgan). Progress bar ko'rsatadi.
collapsiblebooleanfalseKengaytiriladigan/yig'iladigan tavsif
loadingbooleanfalseIkonka o'rniga spinner ko'rsatish
colorstring—Maxsus rang (tur rangini qayta aniqlaydi)
marqueebooleanfalseAylanuvchi matn animatsiyasi
marquee-speednumber50Marquee aylantirish tezligi (yuqoriroq = tezroq)

VxAlertGroup Props ​

PropTypeDefaultDescription
max-countnumber0Ko'rinadigan alert larning maksimal soni (0 = cheksiz)

Slots ​

SlotDescription
defaultSarlavha ostidagi qo'shimcha kontent
iconMaxsus ikonka kontenti
titleMaxsus sarlavha kontenti
descriptionMaxsus tavsif kontenti
actionAmal maydoni (o'ng tomon)

Events ​

EventPayloadDescription
close—Yopish tugmasi bosilganda yoki avtomatik yopish ishga tushganda chiqariladi
after-close—Fade-out o'tishi tugagandan so'ng chiqariladi