Avatar и Badge

Avatar — это компонент, который отображает изображение пользователя, его инициалы или иконку. Он используется в интерфейсах для идентификации пользователя, особенно в списках, комментариях, чатах или профилях. В SvelteKit UI библиотеках компонент Avatar реализован с учётом адаптивности и кастомизации, что позволяет создавать единый визуальный стиль приложения.

Основные свойства Avatar

  • src – URL изображения пользователя. Если изображение недоступно, компонент может отображать инициалы.
  • alt – альтернативный текст для изображения, полезен для доступности.
  • size – размер аватара. Обычно поддерживаются значения sm, md, lg, xl, но библиотеки могут позволять и точное указание в пикселях.
  • fallback – альтернативный контент, отображаемый при отсутствии изображения. Часто это инициалы пользователя или иконка.
  • shape – форма аватара: круглая (circle) или квадратная (square).
  • border – опциональная обводка для выделения аватара на фоне интерфейса.
<Avatar src="/images/user1.jpg" alt="Пользователь Иван" size="md" shape="circle" />
<Avatar fallback="IV" size="lg" shape="circle" />

Расширенные возможности

  • Комбинированные аватары: можно отображать несколько аватаров в одном компоненте, например для групповых чатов.
  • Состояния активности: поддержка отображения статуса пользователя через индикатор активности (online, offline, busy), который можно реализовать как маленький кружок на аватаре.
  • Lazy-loading: встроенная оптимизация загрузки изображений для повышения производительности интерфейса.
<Avatar src="/images/user2.jpg" alt="Пользователь Анна" size="md">
  <span class="status online"></span>
</Avatar>

Badge в SvelteKit UI

Badge — это небольшой компонент, который используется для отображения дополнительной информации, например количества уведомлений, статуса или меток. Badges часто применяются совместно с другими компонентами: кнопками, аватарами, иконками.

Основные свойства Badge

  • content – текст или число, которое отображается внутри бейджа.
  • color – цвет бейджа, обычно поддерживаются стандартные варианты (primary, secondary, success, warning, danger), а также возможность указать кастомный цвет.
  • size – размер бейджа: sm, md, lg.
  • variant – стиль бейджа: solid (заполненный цветом), outline (контур) или ghost (полупрозрачный).
<Badge content="3" color="danger" size="sm" />
<Badge content="New" color="primary" variant="solid" />

Интеграция Badge с Avatar

Комбинация Avatar + Badge позволяет визуально показывать состояние пользователя или количество уведомлений прямо на аватаре. Это достигается с помощью позиционирования Badge поверх Avatar с помощью CSS или встроенных пропсов.

<Avatar src="/images/user3.jpg" size="lg" shape="circle">
  <Badge content="5" color="danger" size="sm" class="badge-top-right" />
</Avatar>

Класс .badge-top-right обычно включает абсолютное позиционирование:

.badge-top-right {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

Расширенные приёмы использования

  • Динамические уведомления: можно связывать значение content с состоянием приложения, чтобы бейдж обновлялся автоматически при изменении данных.
  • Анимации: добавление плавного появления/исчезновения бейджа при изменении количества уведомлений улучшает UX.
  • Мультицветовые бейджи: некоторые библиотеки позволяют комбинировать цвет бейджа с цветом текста и фона, создавая визуальные иерархии информации.

Практические советы

  • Для групповых аватаров лучше использовать сокращённые инициалы, если изображений много, чтобы интерфейс не перегружался.
  • Размер бейджа следует подбирать пропорционально аватару или кнопке, иначе визуальная гармония нарушается.
  • При использовании lazy-loading аватаров стоит добавить fallback, чтобы интерфейс не выглядел пустым до загрузки изображений.
  • Для динамических данных бейджей рекомендуется использовать реактивные переменные Svelte, чтобы изменения данных автоматически отражались в UI.

Примеры комплексного использования

<div class="user-list">
  <Avatar src="/images/user4.jpg" size="md" shape="circle">
    <Badge content="2" color="warning" size="sm" class="badge-top-right" />
  </Avatar>
  <Avatar fallback="MK" size="md" shape="circle">
    <Badge content="!" color="danger" size="sm" class="badge-top-right" />
  </Avatar>
</div>

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

Комбинация Avatar и Badge обеспечивает гибкость в дизайне и повышает интерактивность интерфейсов, делая их современными и функциональными.

Оглавление