QAvatar аватары

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

Базовый пример использования:

<q-avatar>
  <img src="avatar.png" alt="User Avatar">
</q-avatar>

По умолчанию QAvatar создаёт круглую область, размеры которой можно контролировать с помощью пропса size:

<q-avatar size="50px">
  <img src="avatar.png" alt="User Avatar">
</q-avatar>

Проп size принимает значения в пикселях, rem, em, или ключевые размеры Quasar (xs, sm, md, lg, xl).

Цветовые вариации и фон

Для задания фона используется проп color. Он принимает как предустановленные цвета Quasar (primary, secondary, accent и др.), так и кастомные HEX или CSS-переменные:

<q-avatar color="primary">
  <span>AB</span>
</q-avatar>
  • Если аватар содержит текст, цвет текста можно настроить через класс text-white, text-black или любой другой цветовой класс Quasar.
  • Фон и текст можно комбинировать для отображения инициалов пользователя.

Использование с иконками

QAvatar позволяет вставлять иконки Quasar, что особенно удобно для систем без загруженных изображений:

<q-avatar color="orange">
  <q-icon name="person" size="24px" color="white"/>
</q-avatar>
  • Проп size иконки должен быть настроен относительно размера аватара для корректного отображения.
  • Иконки автоматически центрируются внутри блока аватара.

Аватары с динамическими данными

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

<q-avatar :color="userColor">
  <img :src="userAvatar" :alt="userName">
</q-avatar>
data() {
  return {
    userName: 'Иван Иванов',
    userAvatar: '/images/ivan.png',
    userColor: 'blue'
  }
}
  • Автоматическое изменение цвета или изображения позволяет адаптировать интерфейс под пользователя.
  • Можно добавлять fallback изображения или инициал при отсутствии картинки.

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

QAvatar поддерживает круглую и квадратную форму. Для квадратного аватара используется проп rounded:

<q-avatar rounded="xs">
  <img src="avatar.png" alt="User Avatar">
</q-avatar>
  • Значения для rounded: none, xs, sm, md, lg, xl, circle.
  • circle используется по умолчанию, создавая классическую круглую форму.

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

QAvatar идеально сочетается с компонентами QList и QCard:

<q-list>
  <q-item>
    <q-item-section avatar>
      <q-avatar>
        <img src="avatar1.png" alt="User 1">
      </q-avatar>
    </q-item-section>
    <q-item-section>
      <q-item-label>Иван Иванов</q-item-label>
      <q-item-label caption>Online</q-item-label>
    </q-item-section>
  </q-item>
</q-list>
  • Разделение на avatar, label и caption обеспечивает корректную верстку.
  • QAvatar автоматически центрируется по вертикали внутри q-item-section.

Аватары с анимацией и эффектами

QAvatar можно комбинировать с эффектами Quasar и CSS-анимацией:

<q-avatar color="teal" class="q-hover-scale">
  <q-icon name="person" color="white"/>
</q-avatar>
  • Класс q-hover-scale создаёт эффект увеличения при наведении.
  • Можно использовать стандартные CSS-трансформации, градиенты и тени для создания визуально выразительных аватаров.

Использование QAvatar с Badge

Для отображения статуса пользователя (online/offline) QAvatar поддерживает встраивание QBadge:

<q-avatar size="50px">
  <img src="avatar.png" alt="User Avatar">
  <q-badge color="green" floating align="bottom-right" />
</q-avatar>
  • floating позволяет разместить бейдж поверх аватара.
  • Параметры align управляют позицией бейджа: top-left, top-right, bottom-left, bottom-right.

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

  • Для текстовых аватаров использовать сочетание color и текста внутри <span>.
  • Для динамических аватаров — биндинг :src и :color для мгновенного обновления.
  • Для интеграции с иконками и списками — сочетать с QIcon, QList и QItem.
  • Форма, размер и анимация аватара полностью контролируются через пропсы и CSS-классы Quasar.

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

Оглавление