QCard карточки

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

<q-card>
  <q-card-section>
    Основной контент карточки
  </q-card-section>
</q-card>

Блок <q-card-section> служит контейнером для текста, изображений или других компонентов внутри карточки. Разделение на секции повышает гибкость и упрощает стилизацию.

Заголовки и подзаголовки

Карточка может содержать заголовки и подзаголовки с помощью <q-card-section> и специальных пропсов:

<q-card>
  <q-card-section>
    <div class="text-h6">Заголовок карточки</div>
    <div class="text-subtitle2">Подзаголовок</div>
  </q-card-section>
</q-card>
  • text-h6 задаёт размер и стиль заголовка.
  • text-subtitle2 — стиль подзаголовка, подходящий для описания или второстепенной информации.

Изображения в QCard

Для вставки изображений используется компонент <q-img>:

<q-card>
  <q-img src="example.jpg" ratio="16/9" />
  <q-card-section>
    Описание изображения
  </q-card-section>
</q-card>
  • Проп ratio задаёт соотношение сторон изображения.
  • Можно использовать слот fallback для отображения резервного изображения при ошибке загрузки.
<q-img src="invalid.jpg" ratio="16/9">
  <template v-slot:fallback>
    <div class="q-pa-md bg-grey-3 text-center">Изображение недоступно</div>
  </template>
</q-img>

Кнопки и действия

Карточки часто содержат кнопки для взаимодействия. Для этого используется <q-card-actions>:

<q-card>
  <q-card-section>
    Контент карточки
  </q-card-section>
  <q-card-actions align="right">
    <q-btn flat label="Отмена" />
    <q-btn color="primary" label="Сохранить" />
  </q-card-actions>
</q-card>
  • Проп align управляет выравниванием кнопок (left, right, between).
  • Кнопки можно делать плоскими (flat) или с цветовой акцентуацией.

Встроенные элементы и слоты

QCard поддерживает гибкое использование слотов:

  • default — основной контент.
  • header — шапка карточки.
  • footer — нижняя часть с действиями.
  • avatar — для аватарок или значков.
<q-card>
  <q-card-section>
    <template v-slot:header>
      <q-avatar icon="person" />
      Имя пользователя
    </template>
    Основная информация
  </q-card-section>
  <q-card-section>
    Дополнительные данные
  </q-card-section>
</q-card>

Стилизация и темы

Карточки легко стилизуются через классы Quasar:

  • bg-primary, bg-secondary — цвет фона.
  • text-white, text-black — цвет текста.
  • q-pa-md, q-mb-sm — паддинги и отступы.
<q-card class="bg-primary text-white q-pa-md">
  <q-card-section>
    Карточка с пользовательской стилизацией
  </q-card-section>
</q-card>

Для динамических тем можно использовать реактивные переменные и привязывать их к классам или стилям карточки.

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

QCard поддерживает:

  • Интерактивность: проп clickable позволяет использовать карточку как кнопку.
  • Поддержку маршрутов: проп to интегрируется с Vue Router.
  • Анимации: можно комбинировать с <transition> для плавного появления.
<q-card clickable @click="onCardClick">
  <q-card-section>
    Нажми на карточку
  </q-card-section>
</q-card>

Композиция карточек

Карточки удобно использовать в сетках и списках с компонентом <q-card> совместно с <q-layout>, <q-page> и <q-card-section> для создания адаптивных интерфейсов:

<q-page class="q-pa-md">
  <div class="row q-col-gutter-md">
    <q-card class="col-4">
      <q-card-section>Карточка 1</q-card-section>
    </q-card>
    <q-card class="col-4">
      <q-card-section>Карточка 2</q-card-section>
    </q-card>
    <q-card class="col-4">
      <q-card-section>Карточка 3</q-card-section>
    </q-card>
  </div>
</q-page>

Использование классов сетки Quasar (row, col-4, q-col-gutter-md) обеспечивает адаптивное расположение карточек на разных устройствах.

Итоговые рекомендации по QCard

  • Использовать <q-card-section> для структуры контента.
  • Разделять заголовки, подзаголовки, изображения и кнопки на отдельные секции.
  • Использовать слоты для расширенной кастомизации.
  • Применять классы Quasar для быстрого управления стилями и адаптивности.
  • Встраивать карточки в сетки для динамичных и отзывчивых интерфейсов.

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

Оглавление