Avatar

Компонент Avatar используется для отображения визуального представления пользователя, команды или сущности в интерфейсе. В SvelteKit UI библиотеках он обычно строится на базе HTML-элемента <img> или <div> с фоновой картинкой, с возможностью кастомизации размеров, форм и стилей.

Основная структура

Базовый Avatar включает следующие элементы:

<script>
  export let src = '';
  export let alt = 'User avatar';
  export let size = 'md'; // xs, sm, md, lg, xl
  export let shape = 'circle'; // circle, square, rounded
</script>

<div class="avatar {size} {shape}">
  {#if src}
    <img src={src} alt={alt} />
  {:else}
    <span class="placeholder">{alt.charAt(0)}</span>
  {/if}
</div>

<style>
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #e2e8f0;
    font-weight: bold;
    color: #4a5568;
  }
  .avatar.circle { border-radius: 50%; }
  .avatar.square { border-radius: 0; }
  .avatar.rounded { border-radius: 0.5rem; }

  .avatar.xs { width: 24px; height: 24px; font-size: 12px; }
  .avatar.sm { width: 32px; height: 32px; font-size: 14px; }
  .avatar.md { width: 48px; height: 48px; font-size: 16px; }
  .avatar.lg { width: 64px; height: 64px; font-size: 18px; }
  .avatar.xl { width: 96px; height: 96px; font-size: 24px; }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Ключевые моменты:

  • src — URL изображения для аватара.
  • alt — текстовый альтернативный контент.
  • size — размер компонента, может быть задан как строка или числовое значение.
  • shape — форма аватара: круглая, квадратная или с закругленными углами.
  • В случае отсутствия изображения отображается placeholder, обычно первая буква имени.

Интеграция с пользовательскими данными

Часто аватар используется в списках пользователей или комментариях. В SvelteKit это удобно реализовать через each:

<script>
  const users = [
    { id: 1, name: 'Alice', avatar: '/avatars/alice.png' },
    { id: 2, name: 'Bob', avatar: '' },
    { id: 3, name: 'Charlie', avatar: '/avatars/charlie.jpg' },
  ];
</script>

<ul>
  {#each users as user}
    <li>
      <Avatar src={user.avatar} alt={user.name} size="md" />
      <span>{user.name}</span>
    </li>
  {/each}
</ul>

Особенность SvelteKit UI заключается в том, что реактивность данных автоматически обновляет аватар при изменении src или alt. Это особенно важно при асинхронной загрузке изображений, например, из API.

Аватар с иконкой или статусом

Дополнительно можно интегрировать status badge — индикатор онлайн/офлайн состояния:

<div class="avatar-wrapper">
  <Avatar src="/avatars/alice.png" alt="Alice" size="md" />
  <span class="status online"></span>
</div>

<style>
  .avatar-wrapper { position: relative; display: inline-block; }
  .status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
  }
  .status.online { background-color: #48bb78; }
  .status.offline { background-color: #e53e3e; }
</style>

Особенности:

  • Индикатор привязан к аватару с помощью position: absolute.
  • Возможна анимация появления/исчезновения статуса через CSS transitions.
  • Такой подход позволяет создавать групповые аватары, где несколько пользователей отображаются рядом с наложением.

Групповые аватары

Для отображения нескольких пользователей одновременно применяется Avatar Group. Пример реализации:

<script>
  import Avatar from './Avatar.svelte';
  const users = [
    { name: 'Alice', avatar: '/avatars/alice.png' },
    { name: 'Bob', avatar: '/avatars/bob.png' },
    { name: 'Charlie', avatar: '/avatars/charlie.png' },
  ];
</script>

<div class="avatar-group">
  {#each users as user, i}
    <Avatar src={user.avatar} alt={user.name} size="sm" style="margin-left: {-i * 10}px" />
  {/each}
</div>

<style>
  .avatar-group { display: flex; }
</style>

Особенности:

  • Накладывающиеся аватары создают компактное отображение группы.
  • Можно задавать максимальное количество отображаемых аватаров с генерацией +N для скрытых пользователей.
  • Реализуется с помощью динамических стилей или CSS-переменных.

Кастомизация через CSS и слоты

SvelteKit UI поддерживает слоты для аватара, что позволяет вставлять кастомные элементы, например иконки или svg вместо изображения:

<Avatar size="lg" shape="circle">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zM12 14.2c-3.3 0-9.9 1.7-9.9 5v2.7h19.8v-2.7c0-3.3-6.6-5-9.9-5z"/>
  </svg>
</Avatar>

Преимущества:

  • Полная свобода контента внутри аватара.
  • Поддержка динамических компонентов, таких как анимации или индикаторы.
  • В сочетании с реактивностью Svelte, можно динамически менять контент аватара на основе состояния приложения.

Резюме ключевых возможностей Avatar в SvelteKit UI

  • Поддержка изображений и текстовых плейсхолдеров.
  • Настраиваемые размеры и формы.
  • Интеграция с реактивными данными и API.
  • Возможность добавления статусов и индикаторов.
  • Реализация групповых аватаров с наложением.
  • Полная кастомизация через CSS и слоты для динамического контента.

Эти возможности делают компонент Avatar универсальным инструментом для отображения пользователей в интерфейсе, поддерживая как простые, так и сложные сценарии визуализации.

Оглавление