Карточка
Универсальный контейнер-карточка.
Базовое использование
Базовое использование
Пейзаж тушью
Дальние горы словно индиго, близкая вода подёрнута туманом.
Это основная область содержимого карточки.
Интерактивная карточка
При clickable вся карточка несёт семантику button и поддерживает активацию с клавиатуры через Enter / Space.
import { LhCard } from '@lh-ui/react'
export default function Demo() {
return (
<LhCard title="Пейзаж тушью" style={{ width: 300 }}>
<p>Дальние горы словно тушь, ближняя вода подёрнута дымкой.</p>
</LhCard>
)
}
Props компонента Card
| Проп | Описание | Тип | Допустимые значения | По умолчанию |
|---|---|---|---|---|
| title | Заголовок (при отсутствии header выводится стандартная шапка) | string | — | — |
| shadow | Когда показывать тень | 'always' | 'hover' | 'never' | — | 'always' |
| clickable | Вся карточка кликабельна (берёт на себя семантику кнопки для клавиатуры) | boolean | — | false |
| loading | Состояние загрузки (плейсхолдер-скелет в области содержимого, взаимодействие с картой отключено) | boolean | — | false |
| cover | Область обложки | ReactNode | — | — |
| header | Содержимое шапки (переопределяет стандартную шапку) | ReactNode | — | — |
| extra | Дополнительная область справа в шапке | ReactNode | — | — |
| footer | Нижняя область | ReactNode | — | — |
| themeVars | Переменные темы на уровне компонента, переопр еделяющие конфигурацию ConfigProvider | Record<string, string> | — | — |
| bgPattern | Фоновый узор на уровне компонента | string | — | — |
| sx | Сокращение для макета | SxProps | — | — |
События Card
| Событие | Описание | Сигнатура обратного вызова | Аналог во Vue |
|---|---|---|---|
| onClick | Срабатывает при нажатии (только при clickable и отсутствии loading) | (event: MouseEvent) => void | @click |
Клавиатурное взаимодействие
Если заданы clickable и не задано loading, карточка выводится с role="button" и реагирует на Enter / Space (Space вызывает preventDefault, чтобы избежать прокрутки), подробнее см. в разделе Доступность.
Соответствие слотов Vue
Слоты plus cover / header / extra / footer в React соответствуют одноимённым props типа ReactNode, а слот по умолчанию — это children.
Стили
import '@lh-ui/react/style/card'