Card 카드

범용 카드 컨테이너입니다.

기본 사용법

먼 산은 먹빛이고, 가까운 물은 안개를 머금었다.

카드의 본문 영역입니다.

clickable일 때 카드 전체가 button 시맨틱을 가지며, Enter / Space 키보드 활성화를 지원합니다.

import { LhCard } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhCard title="수묵 산수" style={{ width: 300 }}>
      <p>먼 산은 먹빛으로 물들고, 가까운 물에는 안개가 깔립니다.</p>
    </LhCard>
  )
}

Card Props

프로퍼티	설명	타입	선택 가능한 값	기본값
title	제목 (`header`가 없을 때 기본 헤더를 렌더링)	`string`	—	—
shadow	그림자 표시 시기	`'always' \| 'hover' \| 'never'`	—	`'always'`
clickable	카드 전체 클릭 가능 (button 키보드 의미 수용)	`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 측에서 동명의 ReactNode 프로퍼티로 매핑되며, 기본 슬롯은 children입니다.

스타일

import '@lh-ui/react/style/card'

기본 사용법​

Card Props​

Card 이벤트​

스타일​

기본 사용법

Card Props

Card 이벤트

스타일