Аватар

Круглое изображение пользователя или инициалы с размерами и цветами card из Alixan UI.

Установка

npx alixan-ui-nuxt add avatar

Использование

<div class="flex items-center gap-3">
  <Avatar name="Alixan UI" size="sm" />
  <Avatar name="Alixan UI" />
  <Avatar name="Alixan UI" size="lg" />
  <Avatar name="Alixan UI" img="/examples/contact-avatar.webp" size="lg" />
</div>

Справочник API

Свойство	Тип	По умолчанию	Описание
name	string	''	Имя пользователя для генерации инициалов, если изображение не передано.
img	string	-	Необязательный URL изображения. Если он передан, вместо инициалов отображается картинка.
alt	string	-	Доступное описание изображения. По умолчанию используется имя.
size	'sm' \| 'md' \| 'lg'	'md'	Управляет диаметром аватара и размером текста инициалов.