Card 卡片

資訊聚合容器。標題、內容、操作區三段式結構，支援載入態骨架與懸停陰影。

卡片

<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	操作區（底部）