Примитивы

Avatar

Лицо — или инициалы вместо него. Имя живёт на корне, а не на картинке: с инициалами никакого <img> нет, а сами буквы — украшение: «AB» вслух это шум. Поэтому же initials необязателен: имя у аватара уже есть, буквы выводятся из него, а передавать их вручную нужно там, где такой вывод неверен.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Код

index.html

<span role="img" aria-label="Ann Lee" class="aura-avatar aura-avatar--sm"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Bo Ng" class="aura-avatar"><span aria-hidden="true">BN</span></span>
<span role="img" aria-label="Cy Kim" class="aura-avatar aura-avatar--lg"><span aria-hidden="true">CK</span></span>

Demo.tsx

import { Avatar } from '@ilomee/aura-react';

export default function Demo() {
  // `initials` здесь не передан: имя для скринридера у аватара уже есть, поэтому буквы выводятся из
  // него. Передавайте `initials` только там, где такой вывод неверен.
  return (
    <>
      <Avatar alt="Ann Lee" size="sm" />
      <Avatar alt="Bo Ng" />
      <Avatar alt="Cy Kim" size="lg" />
    </>
  );
}

Demo.vue

<script setup lang="ts">
import { Avatar } from '@ilomee/aura-vue';
</script>

<template>
  <Avatar alt="Ann Lee" />
  <Avatar alt="Cy Kim" size="lg" />
</template>

Demo.svelte

<script lang="ts">
  import { Avatar } from '@ilomee/aura-svelte';
</script>

<Avatar alt="Ann Lee" />
<Avatar alt="Cy Kim" size="lg" />

Используется как aura-avatar.

demo.component.ts

import { AuraAvatar } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraAvatar],
  template: `
    <aura-avatar alt="Ann Lee" />
    <aura-avatar alt="Cy Kim" size="lg" />
  `,
})
export class DemoComponent {}

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
src	`string`	—
alt	`string`	—	Доступное имя, на корне, — и источник инициалов.
initials	`string`	—	Если не передан, выводится из `alt`. Передавайте для имён, где такой вывод неверен.
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Имя	Тип	По умолчанию
src	`string`	—
alt	`string`	—
initials	`string`	—
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Имя	Тип	По умолчанию
src	`string`	—
alt	`string`	—
initials	`string`	—
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Имя	Тип	По умолчанию
src	`string`	—
alt	`string`	—
initials	`string`	—
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Какие классы отдаёт

Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.

Класс	Роль	Примечания
.aura-avatar	база	Обязательный. Без него модификатор не работает.
.aura-avatar--sm	модификатор
.aura-avatar--lg	модификатор

Токены и правила

components.css

размер: var(--avatar-sm|md|lg) — modifiers generated from the tokens
инициалы: initialsFrom(alt) — first letter of the first and last word