Примитивы

AvatarGroup

Стопка аватаров внахлёст. У каждого остаётся кольцо цвета холста — именно оно не даёт двум соседним лицам слиться в одно пятно. Рисуется box-shadow, поэтому ничего не стоит для раскладки.

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

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

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

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

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

Код

index.html

<div class="aura-avatar-group">
  <span role="img" aria-label="Ann Lee" class="aura-avatar"><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"><span aria-hidden="true">CK</span></span>
</div>

Demo.tsx

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

export default function Demo() {
  return (
    <AvatarGroup>
      <Avatar alt="Ann Lee" />
      <Avatar alt="Bo Ng" />
      <Avatar alt="Cy Kim" />
    </AvatarGroup>
  );
}

Demo.vue

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

<template>
  <AvatarGroup>
    <Avatar initials="AL" alt="Ann Lee" />
    <Avatar initials="BN" alt="Bo Ng" />
  </AvatarGroup>
</template>

Demo.svelte

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

<AvatarGroup>
  <Avatar initials="AL" alt="Ann Lee" />
  <Avatar initials="BN" alt="Bo Ng" />
</AvatarGroup>

Используется как [auraAvatarGroup] — директива, которую вы вешаете на свой элемент.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraAvatar, AuraAvatarGroup],
  template: `<div auraAvatarGroup>
    <aura-avatar initials="AL" alt="Ann Lee" />
    <aura-avatar initials="BN" alt="Bo Ng" />
  </div>`,
})
export class DemoComponent {}

Это директива — элемент выбираете вы, поэтому входа as нет.

Пропсы

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

Пропсов нет — принимает только содержимое.

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

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

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

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

components.css

нахлёст: var(--avatar-overlap)
кольцо: 0 0 0 2px var(--canvas) — a shadow, not a border