Аватар

LhAvatar используется для отображения аватара пользователя или сущности; поддерживаются три варианта — изображение, иконка и текст; при ошибке загрузки изображения выполняется автоматический откат.

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

Аватар-изображение

fit управляет режимом кадрирования (нативный object-fit), alt задаёт альтернативный текст.

<script setup lang="ts">
</script>

<template>
  <!-- Аватар-изображение -->
  <LhAvatar src="https://api.dicebear.com/9.x/notionists/svg?seed=mo" />
  <!-- кадрирование через fit + альтернативный текст alt -->
  <LhAvatar
    src="https://api.dicebear.com/9.x/notionists/svg?seed=f"
    fit="cover"
    alt="Аватар пользователя"
  />
</template>

<script>
export default {}
</script>

<template>
  <!-- Аватар-изображение -->
  <LhAvatar src="https://api.dicebear.com/9.x/notionists/svg?seed=mo" />
  <!-- кадрирование через fit + альтернативный текст alt -->
  <LhAvatar
    src="https://api.dicebear.com/9.x/notionists/svg?seed=f"
    fit="cover"
    alt="Аватар пользователя"
  />
</template>

Форма и размер

Круглый и квадратный, четыре размера

МСБК

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar
      shape="square"
      size="small"
      text="М"
    />
    <LhAvatar
      shape="square"
      size="medium"
      text="С"
    />
    <LhAvatar
      shape="square"
      size="large"
      text="Б"
    />
    <LhAvatar
      size="large"
      text="К"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar
      shape="square"
      size="small"
      text="М"
    />
    <LhAvatar
      shape="square"
      size="medium"
      text="С"
    />
    <LhAvatar
      shape="square"
      size="large"
      text="Б"
    />
    <LhAvatar
      size="large"
      text="К"
    />
  </div>
</template>

Откат к тексту и иконке

Без изображения откат идёт по порядку icon, затем text

ТA

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar text="Тушь" />
    <LhAvatar icon="user" />
    <LhAvatar text="Alice Chen" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar text="Тушь" />
    <LhAvatar icon="user" />
    <LhAvatar text="Alice Chen" />
  </div>
</template>

Текстовый аватар автоматически показывает первый символ (для китайского — первый иероглиф, для латиницы — первую заглавную букву).

Ошибка загрузки изображения

После ошибки откат к text и событие error

<template>
  <LhAvatar
    src="/broken-avatar.png"
    text="Зап"
    @error="onError"
  />
</template>

<script setup lang="ts">
function onError(e: Event) {
  console.log('avatar load error', e)
}
</script>

<template>
  <LhAvatar
    src="/broken-avatar.png"
    text="Зап"
    @error="onError"
  />
</template>

<script>
export default {
  methods: {
    onError(e) {
      console.log('avatar load error', e)
    },
  },
}
</script>

API

Props

Свойство	Описание	Тип	По умолчанию
src	Адрес изображения; если пусто, откат к иконке/тексту	string	—
alt	Альтернативный текст	string	—
icon	Имя иконки (встроенная иконка LhIcon; показывается, когда src не задан)	LhIconName	—
text	Текстовое содержимое (если src и icon не заданы, показывается первый символ)	string	—
shape	Форма аватара	"circle" | "square"	'circle'
size	Размер аватара	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
fit	Режим загрузки изображения: fill / contain / cover	"fill" | "contain" | "cover" | "none" | "scale-down"	'cover'
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
error	Срабатывает при ошибке загрузки изображения	(e: Event)

Доступность

• В режиме изображения альтернативный текст предоставляется самим <img alt>; если alt не передан, откат к text, затем к avatar
• В режиме иконки / текста корневой элемент получает role="img", а переданный alt используется как доступное имя; сама иконка помечается aria-hidden

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/avatar/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhAvatarProps

export interface LhAvatarProps {
  /** Адрес изображения; если пусто, по очереди откат к иконке, затем к тексту */
  src?: string
  /** Альтернативный текст при ошибке загрузки изображения; используется как alt */
  alt?: string
  /** Имя иконки (показывается, когда src пуст или не загрузился; берётся из встроенных иконок LhIcon) */
  icon?: LhIconName
  /** Содержимое текстового аватара (если src и icon не заданы, показывается первый символ) */
  text?: string
  /** Форма аватара */
  shape?: LhAvatarComponentShape
  /** Размер аватара */
  size?: LhAvatarSize
  /** Режим загрузки изображения: fill / contain / cover */
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhAvatarSize

export type LhAvatarSize = LhComponentSize

LhAvatarShape

export type LhAvatarShape = LhAvatarComponentShape

LhAvatarComponentShape _{(из @lh-ui/share/core/avatar)}

export type LhAvatarShape = 'circle' | 'square'

LhIconName _{(из @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhComponentSize _{(из @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]