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	操作エリア（下部）