Avatar

Отображение фотографий пользователей, инициалов или иконок с индикаторами статуса, бейджами и группировкой.

JSBO

<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 предустановленных размеров или любое значение в пикселях.

XSSMDFLGXL80

<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

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

Initials

Инициалы генерируются автоматически из name. Цвета детерминированы по имени.

AJBOCBDPEVFC

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

Custom Colors

REGRBLPUDA

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

Status Indicator

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

Status Ring

Используйте status-ring, чтобы показывать статус цветным кольцом вокруг аватара вместо точки.

AUOF

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

Notification Badge

Показывайте числовой бейдж или простой индикатор в виде точки.

39999+DIEV

<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

<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. Рендерится как <button> для доступности, с focus ring и обратной связью при нажатии.

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

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

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

Tooltip

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

JS

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

Lazy Loading

Добавьте lazy, чтобы отложить загрузку изображения, пока аватар не окажется рядом с вьюпортом.

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

Srcset (Retina)

Укажите srcset для адаптивных/retina-изображений.

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

Bordered

AL

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

Fallback Slot

Используйте slot fallback для полностью кастомного запасного контента, когда не указаны изображение и имя.

🤖AI

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

Image Fallback

При ошибке загрузки изображения используются инициалы, затем slot fallback, затем стандартная иконка пользователя.

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

Avatar Group

Накладывайте аватары друг на друга. При наведении отдельные аватары выдвигаются.

EV

<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

Установите max, чтобы ограничить число видимых аватаров. Оставшиеся отображаются как бейдж «+N».

+4

<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

Регулируйте степень наложения аватаров через prop overlap (процент от размера аватара).

overlap=15

overlap=25

overlap=40

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

Square Group

DI

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

Avatar Props

Prop	Type	Default	Description
src	string	''	URL изображения
srcset	string	''	srcset для адаптивных изображений
alt	string	''	Alt-текст изображения
name	string	''	Имя для инициалов и автоцвета
size	'xs' | 'sm' | 'default' | 'lg' | 'xl' | number	'default'	Размер аватара
shape	'circle' | 'square'	'circle'	Форма аватара
color	string	''	Цвет текста/иконки
bgColor	string	''	Цвет фона (переопределяет автоцвет)
icon	Component	—	Кастомный компонент иконки
bordered	boolean	false	Показывать рамку
borderColor	string	''	Произвольный цвет рамки
status	'online' | 'offline' | 'busy' | 'away'	''	Индикатор статуса
statusPosition	'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'	'bottom-right'	Позиция точки статуса
statusRing	boolean	false	Показывать статус кольцом вместо точки
badge	string | number	—	Число бейджа (ограничено до 99+)
dot	boolean	false	Показывать точечный бейдж
badgePosition	'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'	'top-right'	Позиция бейджа/точки
badgeColor	string	'#ef4444'	Цвет бейджа/точки
clickable	boolean	false	Сделать интерактивным (рендер как button)
tooltip	string	''	Нативная подсказка при наведении
lazy	boolean	false	Ленивая загрузка изображения

AvatarGroup Props

Prop	Type	Default	Description
max	number	0	Максимум видимых аватаров (0 = все)
size	AvatarSize	'default'	Размер для всех вложенных элементов
shape	'circle' | 'square'	'circle'	Форма для всех вложенных элементов
bordered	boolean	true	Рамка для всех вложенных элементов
overlap	number	25	Процент наложения (0-100)

Events

Event	Type	Description
error	(event)	Не удалось загрузить изображение
click	(event)	Клик по аватару (только при clickable)

Slots

Slot	Description
default	Кастомное содержимое оверлея
fallback	Кастомный фолбэк, когда нет изображения/имени/иконки