Аватары v-avatar

v-avatar — это специализированный компонент Vuetify для отображения круглых или квадратных аватаров пользователей, иконок или любых визуальных идентификаторов. Он упрощает оформление профилей, списков контактов и карточек с пользователями. Компонент автоматически обеспечивает правильное масштабирование содержимого, центрирует его и поддерживает адаптивность.

Синтаксис базового использования:

<v-avatar>
  <img src="avatar.jpg" alt="User Avatar">
</v-avatar>

В этом примере v-avatar оборачивает изображение, автоматически обрезая его по кругу. Если содержимое не является изображением, можно использовать текст или иконку.

Настройка размеров

Размер аватара задается через свойство size или классы Vuetify. Свойство size принимает числа (в пикселях) или строки с единицами измерения.

<v-avatar size="64">
  <img src="avatar.jpg" alt="User Avatar">
</v-avatar>

<v-avatar size="80px">
  <v-icon>mdi-account</v-icon>
</v-avatar>

Ключевой момент: если размер не указан, используется стандартный размер 40px.

Для более гибкой стилизации можно использовать классы text-caption, text-h6 и другие, чтобы автоматически подстраивать текст внутри аватара.

Форма аватара

По умолчанию v-avatar имеет круглую форму. Для квадратного или прямоугольного аватара используется свойство tile:

<v-avatar tile size="50">
  <img src="avatar.jpg" alt="User Avatar">
</v-avatar>

Свойство tile превращает аватар в квадрат. Комбинация с классами rounded-lg или rounded-pill позволяет создавать прямоугольные формы с закруглёнными углами.

Встраивание иконок и текста

Вместо изображения можно использовать текст или иконку:

<v-avatar color="deep-purple accent-4" size="48">
  <span class="white--text">AB</span>
</v-avatar>

<v-avatar color="green lighten-2" size="48">
  <v-icon dark>mdi-account</v-icon>
</v-avatar>
  • color задаёт фоновый цвет аватара.
  • Использование класса white–text или свойства dark обеспечивает контраст и читаемость текста или иконки на фоне.

Работа с изображениями

Для динамических изображений часто применяются свойства src и alt:

<v-avatar size="56" tile>
  <img :src="user.avatarUrl" :alt="user.name">
</v-avatar>

Если изображение отсутствует или не загружено, можно отобразить заглушку:

<v-avatar size="56">
  <v-icon>mdi-account-circle</v-icon>
</v-avatar>

Использование аватаров в списках и группах

v-avatar удобно использовать в v-list, v-chip и v-btn. Для группировки аватаров применяется компонент v-avatar-group:

<v-avatar-group>
  <v-avatar size="40">
    <img src="user1.jpg">
  </v-avatar>
  <v-avatar size="40">
    <img src="user2.jpg">
  </v-avatar>
  <v-avatar size="40">
    <img src="user3.jpg">
  </v-avatar>
</v-avatar-group>

Особенности v-avatar-group:

  • Автоматическое наложение аватаров.
  • Поддержка ограничения видимых элементов через max.
  • Возможность добавления индикатора числа скрытых аватаров.
<v-avatar-group max="3">
  <v-avatar v-for="user in users" :key="user.id" :size="40">
    <img :src="user.avatarUrl" :alt="user.name">
  </v-avatar>
</v-avatar-group>

Цветовые схемы и тема

Компонент поддерживает все стандартные палитры Vuetify. Можно использовать классы цвета или свойство color:

<v-avatar color="red lighten-2" size="48">
  <v-icon dark>mdi-alert</v-icon>
</v-avatar>

При этом:

  • Цвет автоматически применяется к фону.
  • Для текста или иконок нужно указывать контрастный цвет (dark или white--text).

Адаптивность и кастомизация

v-avatar совместим с сеткой Vuetify. Его можно масштабировать с помощью классов ma-2, pa-1 и управлять положением в контейнерах flex:

<div class="d-flex">
  <v-avatar class="ma-2" size="50">
    <img src="user1.jpg">
  </v-avatar>
  <v-avatar class="ma-2" size="50">
    <v-icon>mdi-account</v-icon>
  </v-avatar>
</div>

Кастомизация через CSS также доступна:

<v-avatar class="custom-avatar" size="60">
  <img src="avatar.jpg">
</v-avatar>

<style>
.custom-avatar {
  border: 2px solid #1976d2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
</style>

Интерактивные аватары

v-avatar может использоваться как кнопка или триггер для событий:

<v-btn icon @click="openProfile">
  <v-avatar size="48">
    <img src="user.jpg">
  </v-avatar>
</v-btn>

Такой подход позволяет интегрировать аватары в навигацию, модальные окна или меню пользователя.

Итоги по функциональности v-avatar

  • Поддержка круглой и квадратной формы.
  • Возможность отображения изображений, текста и иконок.
  • Интеграция с группами аватаров через v-avatar-group.
  • Полная кастомизация размеров, цветов и стилей.
  • Использование в интерактивных элементах интерфейса.

Эта гибкость делает v-avatar универсальным инструментом для любых приложений, где требуется компактное и визуально приятное представление пользователей или объектов.

Оглавление