Карточки v-card

v-card — это универсальный компонент Vuetify для отображения информации в виде карточек с различными элементами: заголовками, изображениями, текстом, действиями и медиа-контентом. Он строится на основе Flexbox и поддерживает модульное добавление дочерних компонентов, таких как v-card-title, v-card-subtitle, v-card-text, v-card-actions и v-card-media.

Простейший пример:

<v-card>
  <v-card-title>Заголовок карточки</v-card-title>
  <v-card-text>Основной текст карточки с краткой информацией.</v-card-text>
  <v-card-actions>
    <v-btn color="primary">Действие</v-btn>
  </v-card-actions>
</v-card>

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

  • v-card-title используется для выделения заголовка.
  • v-card-text содержит основной текст.
  • v-card-actions размещает интерактивные элементы, такие как кнопки или ссылки.
  • Все дочерние элементы гибко настраиваются через свойства и CSS-классы.

Работа с медиа-контентом

Для добавления изображений и видео используется v-img или встроенный v-card-media.

Пример с изображением:

<v-card>
  <v-img src="https://example.com/image.jpg" height="200px"></v-img>
  <v-card-title>Карточка с изображением</v-card-title>
  <v-card-text>Описание изображения или дополнительная информация.</v-card-text>
</v-card>

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

  • height и width задают размеры изображения.
  • Можно использовать слоты для наложения текста поверх изображения с помощью v-card-title внутри v-img.

Настройка внешнего вида карточек

v-card поддерживает стилизацию через свойства и CSS-классы:

  • outlined — добавляет рамку вокруг карточки.
  • elevation — задает тень, число от 0 до 24, где 0 — без тени.
  • tile — делает углы карточки прямыми, без скругления.
  • color — задает фон карточки.

Пример:

<v-card color="deep-purple lighten-4" outlined elevation="6" tile>
  <v-card-title>Стилизованная карточка</v-card-title>
  <v-card-text>Фон, рамка, тень и прямые углы применены.</v-card-text>
</v-card>

Карточки с интерактивностью

Карточки могут реагировать на события пользователя. Основные методы интерактивности:

  • hover — добавляет визуальный эффект при наведении.
  • click — позволяет реагировать на клик с помощью @click.
  • Слоты v-card-actions или v-card-title могут содержать интерактивные элементы, например, кнопки или ссылки.

Пример с hover и кликом:

<v-card hover @click="openDialog">
  <v-card-title>Кликабельная карточка</v-card-title>
  <v-card-text>При наведении появляется тень, клик открывает диалог.</v-card-text>
</v-card>

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

v-card имеет несколько полезных слотов для гибкой кастомизации:

  • default — основной слот для контента карточки.
  • title — слот для заголовка, позволяет полностью кастомизировать его внешний вид.
  • subtitle — для подзаголовка.
  • actions — для кнопок, ссылок и других интерактивных элементов.
  • media — для изображений и видео с возможностью накладывать текст или элементы интерфейса.

Пример:

<v-card>
  <template v-slot:title>
    <v-icon left>mdi-star</v-icon>
    Заголовок с иконкой
  </template>
  <v-card-text>Карточка с кастомным заголовком через слот.</v-card-text>
  <template v-slot:actions>
    <v-btn text color="secondary">Подробнее</v-btn>
  </template>
</v-card>

Вложенные карточки и сетки

Карточки можно комбинировать с сетками Vuetify (v-row, v-col) для построения сложных интерфейсов.

Пример сетки карточек:

<v-row>
  <v-col cols="12" sm="6" md="4" v-for="item in items" :key="item.id">
    <v-card>
      <v-img :src="item.image" height="150px"></v-img>
      <v-card-title>{{ item.title }}</v-card-title>
      <v-card-text>{{ item.description }}</v-card-text>
      <v-card-actions>
        <v-btn text color="primary">Открыть</v-btn>
      </v-card-actions>
    </v-card>
  </v-col>
</v-row>

Преимущества использования сетки:

  • Автоматическое масштабирование карточек на разных экранах.
  • Упрощение выравнивания и расстояний между элементами.
  • Поддержка адаптивного дизайна без дополнительного CSS.

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

  1. Карточки с динамическим содержимым — можно подгружать данные через v-for и API-запросы, используя свойства компонентов.
  2. Карточки с расширяемыми секциями — добавление v-expand-transition для скрытия и раскрытия дополнительного текста.
  3. Интеграция с Vuetify v-hover и v-ripple — визуальные эффекты при наведении и клике.

Пример расширяемой карточки:

<v-card>
  <v-card-title @click="expanded = !expanded">
    Заголовок
    <v-icon right>{{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
  </v-card-title>
  <v-expand-transition>
    <v-card-text v-if="expanded">
      Раскрытая информация о карточке.
    </v-card-text>
  </v-expand-transition>
</v-card>

Использование тем и цветовых схем

Vuetify поддерживает глобальные темы и локальные цветовые настройки через свойства color, dark и light.

Пример темной карточки:

<v-card color="blue-grey darken-3" dark>
  <v-card-title>Тёмная карточка</v-card-title>
  <v-card-text>Текст автоматически светлый для контраста.</v-card-text>
</v-card>

Важные рекомендации при работе с v-card

  • Использовать слоты для максимальной гибкости вместо жестко заданного HTML-кода.
  • Сочетать с сетками Vuetify для адаптивного дизайна.
  • Контролировать интерактивность через события и hover/ripple для улучшения UX.
  • Применять стили и тени умеренно, чтобы интерфейс оставался чистым и современным.
  • Для динамического контента использовать реактивные свойства и v-for, чтобы карточки автоматически обновлялись при изменении данных.

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

Оглавление