Avatar

Foydalanuvchi profil rasmlari, bosh harflari yoki ikonkalarini holat indikatorlari, badge lar va guruhlash bilan ko'rsatadi.

JSBO

vue

<script setup lang="ts">
import { VxAvatar } from 'veloxui'
</script>

<template>
  <VxAvatar src="https://example.com/photo.jpg" name="John Doe" />
  <VxAvatar name="Jane Smith" />
  <VxAvatar name="Bob" bg-color="#3b82f6" />
  <VxAvatar />
</template>

Sizes

5 ta oldindan belgilangan o'lchamda yoki istalgan maxsus piksel qiymatida mavjud.

XSSMDFLGXL80

vue

<template>
  <VxAvatar name="Alice" size="xs" />   <!-- 24px -->
  <VxAvatar name="Alice" size="sm" />   <!-- 32px -->
  <VxAvatar name="Alice" />             <!-- 40px default -->
  <VxAvatar name="Alice" size="lg" />   <!-- 48px -->
  <VxAvatar name="Alice" size="xl" />   <!-- 64px -->
  <VxAvatar name="Alice" :size="80" />  <!-- 80px custom -->
</template>

Shapes

vue

<template>
  <VxAvatar src="..." shape="circle" />
  <VxAvatar src="..." shape="square" />
</template>

Initials

Bosh harflar name dan avtomatik ravishda yaratiladi. Ranglar har bir ism uchun aniq belgilangan.

AJBOCBDPEVFC

vue

<template>
  <VxAvatar name="Alice Johnson" />  <!-- AJ -->
  <VxAvatar name="Bob" />           <!-- BO -->
  <VxAvatar name="Charlie Brown" /> <!-- CB -->
</template>

Custom Colors

REGRBLPUDA

vue

<template>
  <VxAvatar name="Alice" bg-color="#ef4444" />
  <VxAvatar name="Alice" bg-color="#18181b" color="#fafafa" />
</template>

Status Indicator

vue

<template>
  <VxAvatar src="..." status="online" />
  <VxAvatar src="..." status="offline" />
  <VxAvatar src="..." status="busy" />
  <VxAvatar src="..." status="away" />
</template>

Status Ring

Holatni avatar atrofidagi nuqta o'rniga rangli halqa sifatida ko'rsatish uchun status-ring dan foydalaning.

AUOF

vue

<template>
  <VxAvatar src="..." status="online" status-ring />
  <VxAvatar src="..." status="busy" status-ring />
</template>

Notification Badge

Raqamli badge yoki oddiy nuqta indikatorini ko'rsatadi.

99+DIEV

vue

<script setup lang="ts">
import { VxAvatar } from 'veloxui'
</script>

<template>
  <!-- Number badge (caps at 99+) -->
  <VxAvatar src="..." :badge="3" />
  <VxAvatar src="..." :badge="150" />  <!-- shows "99+" -->

  <!-- Dot badge -->
  <VxAvatar name="Diana" dot />

  <!-- Custom badge color -->
  <VxAvatar name="Eve" dot badge-color="#3b82f6" />
</template>

Badge Position

TR1TL2BR3BL4

vue

<template>
  <VxAvatar :badge="1" badge-position="top-right" />
  <VxAvatar :badge="2" badge-position="top-left" />
  <VxAvatar :badge="3" badge-position="bottom-right" />
  <VxAvatar :badge="4" badge-position="bottom-left" />
</template>

Clickable

clickable bilan avatarni interaktiv qiling. Imkoniyatli (accessible) bo'lishi uchun fokus halqasi va bosish teskari aloqasi bilan <button> sifatida renderlanadi.

vue

<script setup lang="ts">
import { VxAvatar } from 'veloxui'

function onAvatarClick() {
  alert('Avatar clicked!')
}
</script>

<template>
  <VxAvatar src="..." clickable @click="onAvatarClick" />
</template>

Nomni tabiiy tooltip sifatida ko'rish uchun hover qiling.

vue

<template>
  <VxAvatar src="..." tooltip="John Doe - Admin" />
  <VxAvatar name="Jane" tooltip="Jane Smith - Editor" />
</template>

Lazy Loading

Avatar viewport ga yaqin bo'lgunga qadar rasm yuklashni kechiktirish uchun lazy ni qo'shing.

vue

<template>
  <VxAvatar src="..." lazy />
</template>

Srcset (Retina)

Moslashuvchan/retina rasmlar uchun srcset ni taqdim eting.

vue

<template>
  <VxAvatar
    src="photo-1x.jpg"
    srcset="photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
  />
</template>

Bordered

vue

<template>
  <VxAvatar src="..." bordered />
  <VxAvatar src="..." bordered border-color="#3b82f6" />
</template>

Fallback Slot

Rasm yoki ism berilmaganda butunlay maxsus fallback kontenti uchun fallback slot idan foydalaning.

🤖AI

vue

<template>
  <VxAvatar size="lg" bg-color="#18181b">
    <template #fallback>
      <span style="font-size: 20px;">🤖</span>
    </template>
  </VxAvatar>
</template>

Image Fallback

Rasm yuklanmay qolganda bosh harflarga, keyin fallback slot ga, keyin esa standart foydalanuvchi ikonkasiga qaytadi.

vue

<template>
  <VxAvatar src="https://broken.url" name="Fallback User" />
  <VxAvatar src="https://broken.url" />
</template>

Avatar Group

Avatarlarni ustma-ust to'plash. Alohida avatarlarni ajratib chiqarish uchun hover qiling.

vue

<script setup lang="ts">
import { VxAvatar, VxAvatarGroup } from 'veloxui'
</script>

<template>
  <VxAvatarGroup size="lg">
    <VxAvatar src="..." name="Alice" />
    <VxAvatar src="..." name="Bob" />
    <VxAvatar src="..." name="Charlie" />
    <VxAvatar name="Eve" />
  </VxAvatarGroup>
</template>

Group with +N Overflow

Ko'rinadigan avatarlarni cheklash uchun max ni o'rnating. Qolgan soni "+N" badge sifatida ko'rsatiladi.

vue

<template>
  <VxAvatarGroup size="lg" :max="3">
    <VxAvatar src="..." name="Alice" />
    <VxAvatar src="..." name="Bob" />
    <VxAvatar src="..." name="Charlie" />
    <VxAvatar src="..." name="Diana" />
    <VxAvatar src="..." name="Eve" />
    <!-- Shows "+2" overflow badge -->
  </VxAvatarGroup>
</template>

Group Overlap Control

overlap prop i bilan avatarlarning qanchalik ustma-ust tushishini sozlang (avatar o'lchamining foizi).

overlap=15

overlap=25

overlap=40

vue

<template>
  <VxAvatarGroup :overlap="15">...</VxAvatarGroup>  <!-- less overlap -->
  <VxAvatarGroup :overlap="25">...</VxAvatarGroup>  <!-- default -->
  <VxAvatarGroup :overlap="40">...</VxAvatarGroup>  <!-- more overlap -->
</template>

Square Group

vue

<template>
  <VxAvatarGroup shape="square" size="lg">
    <VxAvatar src="..." />
    <VxAvatar name="Diana" />
  </VxAvatarGroup>
</template>

Avatar Props

Prop	Type	Default	Description
`src`	`string`	`''`	Rasm URL i
`srcset`	`string`	`''`	Moslashuvchan rasm srcset i
`alt`	`string`	`''`	Rasm alt matni
`name`	`string`	`''`	Bosh harflar va avto-rang uchun ism
`size`	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| number`	`'default'`	Avatar o'lchami
`shape`	`'circle' \| 'square'`	`'circle'`	Avatar shakli
`color`	`string`	`''`	Matn/ikonka rangi
`bgColor`	`string`	`''`	Fon rangi (avto-rangni qayta aniqlaydi)
`icon`	`Component`	—	Maxsus ikonka komponenti
`bordered`	`boolean`	`false`	Chegarani ko'rsatish
`borderColor`	`string`	`''`	Maxsus chegara rangi
`status`	`'online' \| 'offline' \| 'busy' \| 'away'`	`''`	Holat indikatori
`statusPosition`	`'top-right' \| 'bottom-right' \| 'top-left' \| 'bottom-left'`	`'bottom-right'`	Holat nuqtasi pozitsiyasi
`statusRing`	`boolean`	`false`	Holatni nuqta o'rniga halqa sifatida ko'rsatish
`badge`	`string \| number`	—	Badge raqami (99+ da cheklanadi)
`dot`	`boolean`	`false`	Nuqta badge ni ko'rsatish
`badgePosition`	`'top-right' \| 'bottom-right' \| 'top-left' \| 'bottom-left'`	`'top-right'`	Badge/nuqta pozitsiyasi
`badgeColor`	`string`	`'#ef4444'`	Badge/nuqta rangi
`clickable`	`boolean`	`false`	Interaktiv qilish (button sifatida renderlanadi)
`tooltip`	`string`	`''`	Hover da tabiiy tooltip
`lazy`	`boolean`	`false`	Rasmni sekin yuklash

AvatarGroup Props

Prop	Type	Default	Description
`max`	`number`	`0`	Ko'rinadigan avatarlar maksimal soni (0 = hammasi)
`size`	`AvatarSize`	`'default'`	Barcha farzandlar uchun o'lcham
`shape`	`'circle' \| 'square'`	`'circle'`	Barcha farzandlar uchun shakl
`bordered`	`boolean`	`true`	Barcha farzandlarga chegara qo'yish
`overlap`	`number`	`25`	Ustma-ust tushish foizi (0-100)

Events

Event	Type	Description
`error`	`(event)`	Rasm yuklanmadi
`click`	`(event)`	Avatar bosildi (faqat `clickable` bo'lganda)

Slots

Slot	Description
`default`	Maxsus qoplama kontenti
`fallback`	Rasm/ism/ikonka bo'lmaganda maxsus fallback

Avatar ​

Sizes ​

Shapes ​

Initials ​

Custom Colors ​

Status Indicator ​

Status Ring ​

Notification Badge ​

Badge Position ​

Clickable ​

Tooltip ​

Lazy Loading ​

Srcset (Retina) ​

Bordered ​

Fallback Slot ​

Image Fallback ​

Avatar Group ​

Group with +N Overflow ​

Group Overlap Control ​

Square Group ​

Avatar Props ​

AvatarGroup Props ​

Events ​

Slots ​