Card

Компонент Card в библиотеке Element Plus представляет собой контейнер для структурирования информации в виде карточки. Он обеспечивает визуальное разделение контента, позволяя создавать аккуратные блоки с заголовками, изображениями, действиями и дополнительными элементами. Card используется для отображения информации в панелях, витринах, профилях и любых местах, где требуется визуально отделённый контент.

Структура Card

Карточка состоит из следующих ключевых частей:

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

Простейший пример использования:

<template>
  <el-card>
    <div>Основное содержимое карточки</div>
  </el-card>
</template>

В этом примере создаётся простая карточка без заголовка и дополнительных элементов.

Заголовок и слот header

Для добавления заголовка используется prop header или слот header. Использование слота позволяет полностью кастомизировать верхнюю часть карточки, включая иконки, кнопки или стилизованный текст.

<el-card>
  <template #header>
    <span>Заголовок карточки</span>
    <el-button type="primary" size="small">Действие</el-button>
  </template>
  <div>Содержимое карточки</div>
</el-card>

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

  • #header позволяет вставлять сложные компоненты, включая кнопки и иконки.
  • Слот обеспечивает гибкость в кастомизации по сравнению с простым использованием пропа header.

Основное содержимое

Содержимое карточки помещается внутрь <el-card>. Это может быть текст, изображения, списки, таблицы или любые компоненты Vue. Для создания визуального разделения внутри тела карточки можно использовать внутренние элементы с отступами или границами.

<el-card>
  <div class="card-content">
    <p>Описание элемента</p>
    <el-tag type="success">Активный</el-tag>
  </div>
</el-card>

Добавление тени и стиля

Card поддерживает кастомизацию внешнего вида с помощью props shadow и body-style.

  • shadow – добавляет тень к карточке. Возможные значения: always, hover, never.
  • body-style – позволяет задавать CSS стили для основного тела карточки, например отступы или фоновый цвет.

Пример:

<el-card shadow="hover" :body-style="{ padding: '20px', backgroundColor: '#f9f9f9' }">
  <div>Карточка с кастомным стилем</div>
</el-card>

Интеграция изображений

Для визуально насыщенных карточек часто требуется отображать изображения. Можно использовать слот header или отдельный блок внутри body для картинки.

<el-card shadow="hover">
  <template #header>
    <img src="https://via.placeholder.com/300x100" alt="Превью" style="width:100%; border-radius:4px 4px 0 0;">
  </template>
  <div>
    <h3>Заголовок с изображением</h3>
    <p>Описание и дополнительная информация</p>
  </div>
</el-card>

Слот footer позволяет добавлять кнопки или ссылки, создавая интерактивные карточки.

<el-card>
  <div>Содержимое карточки</div>
  <template #footer>
    <el-button type="primary" size="small">Принять</el-button>
    <el-button size="small">Отмена</el-button>
  </template>
</el-card>

Рекомендации по использованию footer:

  • Размещать кнопки действий в нижней части для визуальной иерархии.
  • Использовать маленькие размеры кнопок (size="small") для компактного интерфейса.

Адаптивность и сетки

Карточки часто располагаются в сетках, что делает интерфейс гибким и аккуратным. Для этого можно использовать el-row и el-col.

<el-row :gutter="20">
  <el-col :span="8">
    <el-card shadow="hover">
      <div>Карточка 1</div>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="hover">
      <div>Карточка 2</div>
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="hover">
      <div>Карточка 3</div>
    </el-card>
  </el-col>
</el-row>

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

  • gutter задаёт расстояние между колонками.
  • Комбинация карточек с сеткой позволяет создавать витрины, панели информации и профили с одинаковым стилем.

Кастомизация через CSS

Card предоставляет гибкие возможности кастомизации через классы и стили:

  • .el-card – основной контейнер карточки.
  • .el-card__header – верхняя часть, заголовок.
  • .el-card__body – тело карточки.
  • .el-card__footer – нижняя часть, действия.

Пример добавления границы и радиуса через CSS:

.custom-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
<el-card class="custom-card">
  <div>Карточка с кастомной рамкой</div>
</el-card>

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

Карточки идеально подходят для отображения данных, получаемых с сервера. Для этого можно использовать v-for:

<el-row :gutter="20">
  <el-col v-for="item in items" :key="item.id" :span="6">
    <el-card shadow="hover">
      <h4>{{ item.title }}</h4>
      <p>{{ item.description }}</p>
    </el-card>
  </el-col>
</el-row>

Преимущества:

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

Итоговые возможности Card

  • Заголовки и кастомные слоты.
  • Тело с любым контентом: текст, изображения, списки, таблицы.
  • Footer для действий.
  • Тени и стили через props и CSS.
  • Адаптивная интеграция с сеткой.
  • Полная поддержка динамического контента через Vue.

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

Оглавление