Карточка

Информационный контейнер с заголовком, содержимым и нижней областью действий. Может быть кликабельным целиком (с семантикой button для клавиатуры), поддерживает плейсхолдер загрузки и быструю компоновку sx.

Базовое использование

Базовое использование

Дождь стучит по листьям банана

За окном слышен ночной дождь — первой откликается банановая пальма.

<script setup lang="ts">
</script>

<template>
  <LhCard title="Дождь стучит по листьям банана">
    За окном слышен ночной дождь — первой откликается банановая пальма.
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="Дождь стучит по листьям банана">
    За окном слышен ночной дождь — первой откликается банановая пальма.
  </LhCard>
</template>

shadow управляет моментом появления тени: always (по умолчанию) / hover (при наведении) / never.

Момент появления тени

Тень при наведении

Тень появляется при наведении.

Без тени

Тени нет никогда.

<script setup lang="ts">
</script>

<template>
  <LhCard shadow="hover" title="Тень при наведении">Тень появляется при наведении.</LhCard>
  <LhCard shadow="never" title="Без тени">Тени нет никогда.</LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard shadow="hover" title="Тень при наведении">Тень появляется при наведении.</LhCard>
  <LhCard shadow="never" title="Без тени">Тени нет никогда.</LhCard>
</template>

Слот заголовка и extra

Пользовательский заголовок

Пользовательский заголовокДействия

Через слот header можно полностью перехватить область заголовка.

<script setup lang="ts">
</script>

<template>
  <LhCard>
    <template #header><span>Пользовательский заголовок</span></template>
    <template #extra>Действия</template>
    …
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <LhCard>
    <template #header><span>Пользовательский заголовок</span></template>
    <template #extra>Действия</template>
    …
  </LhCard>
</template>

Обложка и подвал

Обложка и подвал

Область обложки

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

<script setup lang="ts">
</script>

<template>
  <!-- Обложка и подвал -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">Избранное</LhButton>
    </template>
  </LhCard>
</template>

<script>
export default {}
</script>

<template>
  <!-- Обложка и подвал -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">Избранное</LhButton>
    </template>
  </LhCard>
</template>

Кликабельная карта целиком

При clickable вся карточка принимает на себя семантику button: доступна для фокуса через Tab (с кольцом фокуса на :focus-visible), Enter / Space вызывают click.

Кликабельная карточка

Нажмите меня

Вся карточка кликабельна. Переведите фокус клавишей Tab и нажмите Enter.

<script setup lang="ts">
function onCardClick() {
  console.log('card clicked')
}
</script>

<template>
  <!-- Кликабельная карточка -->
  <LhCard clickable title="Нажмите меня" @click="onCardClick">…</LhCard>
</template>

<script>
export default {
  methods: {
    onCardClick() {
      console.log('card clicked')
    },
  },
}
</script>

<template>
  <!-- Кликабельная карточка -->
  <LhCard clickable title="Нажмите меня" @click="onCardClick">…</LhCard>
</template>

Состояние загрузки

Состояние загрузки

Загрузка

<script setup lang="ts">
</script>

<template>
  <LhCard title="Загрузка" loading />
</template>

<script>
export default {}
</script>

<template>
  <LhCard title="Загрузка" loading />
</template>

Card API

Props

Свойство	Описание	Тип	По умолчанию
title	Заголовок карточки (можно также использовать слот header)	string	—
shadow	Момент появления тени	"always" | "hover" | "never"	'always'
clickable	Кликом по всей карточке (принимает на себя семантику button для клавиатуры)	boolean	false
loading	Состояние загрузки: область содержимого заменяется каркасом	boolean	false
themeVars	Переменные темы на уровне компонента (ключи автоматически получают префикс --lh-)	{ [x: string]: string; }	—
bgPattern	URL фонового узора (например var(--lh-pattern-willow)); не подчиняется глобальному белому списку	string	—
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр
click	Кликом по кликабельной карточке (мышью или с клавиатуры Enter/Space)	(e: Event) => void

Переменные темы

Следующие CSS-переменные задают значения по умолчанию на .lh-card; их можно глобально или на уровне компонента переопределить через themeVars:

Переменная	Описание	По умолчанию
--lh-card-border-radius	Скругление углов	border-radius-base + 2px
--lh-card-bg	Цвет фона	--lh-bg-color
--lh-card-border-color	Цвет рамки	--lh-border-color-light
--lh-card-header-padding / --lh-card-body-padding / --lh-card-footer-padding	Внутренние отступы трёх областей	14px 20px / 18px 20px / 12px 20px
--lh-card-shadow / --lh-card-shadow-hover	Обычная тень / тень при наведении	Мягкая двойная тень в тёплых чернильных тонах
--lh-card-loading-bg / --lh-card-loading-highlight	Фон плейсхолдера загрузки / блик бегущего света	--lh-border-color-light / смешанный цвет, осветлённый к бумажному оттенку

Slots

Слот	Описание
header	Пользовательская область заголовка
extra	Дополнительное содержимое справа от заголовка
cover	Обложка
default	Основное содержимое
footer	Подвал

Доступность

• Кликая карточка: role="button" + tabindex="0" + активация через Enter/Space (шаблон APG button)
• Состояние загрузки: контейнер aria-busy="true", плейсхолдер-каркас скрыт от скринридера
• Кольцо фокуса клавиатуры на :focus-visible, при клике мышью не показывается

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/card/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhCardProps

export interface LhCardProps {
  /** Заголовок карточки (можно также использовать слот header) */
  title?: string
  /** Момент появления тени */
  shadow?: LhCardShadow
  /** Кликом по всей карточке (принимает на себя семантику button для клавиатуры) */
  clickable?: boolean
  /** Состояние загрузки: область содержимого заменяется каркасом */
  loading?: boolean
  /** Переменные темы на уровне компонента (ключи автоматически получают префикс --lh-) */
  themeVars?: Record<string, string>
  /** URL фонового узора (например var(--lh-pattern-willow)); не подчиняется глобальному белому списку */
  bgPattern?: string
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhCardShadow _{(из @lh-ui/share/core/card)}

/** Момент появления тени карточки */
export type LhCardShadow = 'always' | 'hover' | 'never'