Card 카드

정보 집약 컨테이너입니다. 제목, 콘텐츠, 조작 영역의 3단 구조, 로딩 상태 스켈레톤과 마우스 오버 그림자를 지원합니다.

카드

<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	제목 영역 (title prop와 택일)
default	콘텐츠 영역
actions	조작 영역 (하단)