Карточка

Контейнер для объединения информации. Трёхсегментная структура — заголовок, содержимое, область действий; поддерживаются скелетон состояния загрузки и тень при наведении.

Карточка

<template>
  <div class="demo-row" style="align-items: flex-start">
    <LhCard title="Путешествие среди гор и ручьёв" style="width: 240px">
      <p class="demo-note">Фань Куань, эпоха Северная Сун. Горы и камни написаны штрихом «дождевые капли», образ полон мощи.</p>
      <template #actions>
        <LhButton size="small">Разбор</LhButton>
        <LhButton size="small" type="primary">В коллекцию</LhButton>
      </template>
    </LhCard>
    <LhCard title="Состояние загрузки" loading style="width: 240px">
      <p class="demo-note">Область содержимого занимает скелетон.</p>
    </LhCard>
    <LhCard title="Кликабельная карточка" clickable shadow="hover" style="width: 240px">
      <p class="demo-note">При shadow=hover карточка приподнимается при наведении, а clickable берёт на себя семантику button.</p>
    </LhCard>
    <LhCard style="width: 240px">
      <template #header>
        <span style="font-weight: 600">Заголовок слота header</span>
      </template>
      <p class="demo-note">title или слот header — на выбор.</p>
    </LhCard>
  </div>
</template>

Props

Проп	Описание	Тип	По умолчанию
title	Заголовок (можно использовать слот header)	string	''
shadow	Момент отображения тени	'always' \| 'hover' \| 'never'	'always'
clickable	Вся карточка кликабельна (берёт на себя клавиатурную семантику button)	boolean	false
loading	Состояние загрузки: область содержимого занимает скелетон	boolean	false
themeVars / bgPattern / sx	Переопределение темы	—	—

Slots

Слот	Описание
header	Область заголовка (вместо prop title)
default	Область содержимого
actions	Область действий (внизу)