Card компонент

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

В Naive UI компонент Card реализован с поддержкой различных вариантов стилей и расширенной кастомизации через свойства и слоты.

import { NCard } from 'naive-ui'

<NCard title="Пример карточки">
  Содержимое карточки
</NCard>

Здесь ключевое свойство title задает заголовок карточки, а контент передается через слот по умолчанию.

Структура и слоты

Карточка в Naive UI поддерживает следующие основные слоты:

  • header – позволяет полностью переопределить верхнюю часть карточки, включая заголовок.
  • default – основной контент карточки.
  • footer – нижняя часть, например, кнопки действий или ссылки.

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

<NCard>
  <template #header>
    <h3>Заголовок карточки</h3>
  </template>
  
  <template #default>
    <p>Основной контент карточки с текстом и изображениями.</p>
  </template>
  
  <template #footer>
    <button>Действие</button>
  </template>
</NCard>

Свойства компонента

1. bordered Определяет наличие рамки вокруг карточки. При значении true добавляется легкая граница.

<NCard bordered>
  Контент с рамкой
</NCard>

2. hoverable Добавляет эффект наведения на карточку, создавая визуальное выделение при наведении курсора.

3. size Управляет размерами карточки. Поддерживаемые значения: 'small', 'medium', 'large'. Пример:

<NCard size="large">
  Большая карточка
</NCard>

4. hoverable + bordered Часто комбинируются для создания интерактивных карточек с визуальной границей.

Стиль и кастомизация

Card позволяет кастомизировать стили через CSS-переменные:

  • --n-card-border-radius – радиус скругления углов.
  • --n-card-padding – внутренние отступы.
  • --n-card-color – цвет фона карточки.
  • --n-card-box-shadow – тень для карточки, особенно при hoverable.

Пример переопределения стилей:

.custom-card {
  --n-card-border-radius: 16px;
  --n-card-padding: 24px;
  --n-card-box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
<NCard class="custom-card">
  Кастомная карточка
</NCard>

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

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

import { NGrid, NGridItem } from 'naive-ui'

<NGrid cols="3" x-gap="16" y-gap="16">
  <NGridItem>
    <NCard title="Карточка 1">Контент 1</NCard>
  </NGridItem>
  <NGridItem>
    <NCard title="Карточка 2">Контент 2</NCard>
  </NGridItem>
  <NGridItem>
    <NCard title="Карточка 3">Контент 3</NCard>
  </NGridItem>
</NGrid>

Карточка с интерактивными элементами

Компонент Card поддерживает интерактивность за счет кликабельного заголовка, кнопок и событий:

  • onClick – обработчик клика по карточке.
  • onMouseenter / onMouseleave – события наведения курсора.

Пример:

<NCard
  title="Кликабельная карточка"
  hoverable
  @click="handleCardClick"
>
  Контент карточки
</NCard>
function handleCardClick() {
  console.log('Карточка нажата');
}

Использование Card для визуальных медиа

Card отлично подходит для отображения изображений, видео или аватаров. Для этого можно использовать слот cover или вставлять медиа в основной слот.

<NCard title="Карточка с изображением">
  <img src="image.jpg" alt="Пример" style="width: 100%; border-radius: 8px;" />
  <p>Описание изображения</p>
</NCard>

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

Карточки в Naive UI гибко адаптируются к ширине контейнера. Свойства size, сетка NGrid и CSS-переменные позволяют создавать как компактные карточки для мобильных устройств, так и большие карточки для десктопа.

Резюме ключевых возможностей

  • Разделение на header, default, footer слоты.
  • Поддержка bordered, hoverable и size для визуальной настройки.
  • Гибкая кастомизация через CSS-переменные.
  • Интерактивные элементы через события.
  • Возможность использования в сетке и для медиа-контента.

Карточка в Naive UI — универсальный компонент для организации информации и создания привлекательных интерфейсов.

Оглавление