Card カード

タイトル・内容・フッターのアクションを格納する情報コンテナです。カード全体をクリック可能にでき（button のキーボードセマンティックを内蔵）、読み込み中のプレースホルダーと sx クイックレイアウトをサポートします。

基本的な使い方

窓越しに夜の雨を知る、芭蕉が先に音を立てる。

vue

<script setup lang="ts">
</script>

<template>
  <LhCard title="夜雨の芭蕉">
    窓越しに夜の雨を知る、芭蕉が先に音を立てる。
  </LhCard>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhCard title="夜雨の芭蕉">
    窓越しに夜の雨を知る、芭蕉が先に音を立てる。
  </LhCard>
</template>

shadow はシャドウを表示するタイミングを制御します：always（デフォルト）/ hover（ホバー時）/ never。

ホバーするとシャドウが現れます。

常にシャドウなし。

vue

<script setup lang="ts">
</script>

<template>
  <LhCard shadow="hover" title="ホバー時にシャドウ">ホバーするとシャドウが現れます。</LhCard>
  <LhCard shadow="never" title="シャドウなし">常にシャドウなし。</LhCard>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhCard shadow="hover" title="ホバー時にシャドウ">ホバーするとシャドウが現れます。</LhCard>
  <LhCard shadow="never" title="シャドウなし">常にシャドウなし。</LhCard>
</template>

ヘッダースロットと extra

header スロットを使うとタイトルエリアを完全に制御できます。

vue

<script setup lang="ts">
</script>

<template>
  <LhCard>
    <template #header><span>カスタムヘッダー</span></template>
    <template #extra>操作</template>
    …
  </LhCard>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhCard>
    <template #header><span>カスタムヘッダー</span></template>
    <template #extra>操作</template>
    …
  </LhCard>
</template>

カバーとフッター

カバーエリア

本文の内容……

vue

<script setup lang="ts">
</script>

<template>
  <!-- カバーとフッター -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">お気に入り</LhButton>
    </template>
  </LhCard>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- カバーとフッター -->
  <LhCard>
    <template #cover>…</template>
    …
    <template #footer>
      <LhButton size="small">お気に入り</LhButton>
    </template>
  </LhCard>
</template>

カード全体をクリック可能

clickable を指定すると、カード全体が button のセマンティックを担います。Tab でフォーカスでき（:focus-visible フォーカスリング）、Enter / Space で click をトリガーします。

カード全体がクリック可能です。キーボードの Tab でフォーカスして Enter を押してみてください。

vue

<script setup lang="ts">
function onCardClick() {
  console.log('card clicked')
}
</script>

<template>
  <!-- クリック可能なカード -->
  <LhCard clickable title="クリックしてください" @click="onCardClick">…</LhCard>
</template>

vue

<script>
export default {
  methods: {
    onCardClick() {
      console.log('card clicked')
    },
  },
}
</script>

<template>
  <!-- クリック可能なカード -->
  <LhCard clickable title="クリックしてください" @click="onCardClick">…</LhCard>
</template>

読み込み中

vue

<script setup lang="ts">
</script>

<template>
  <LhCard title="読み込み中" loading />
</template>

vue

<script>
export default {}
</script>

<template>
  <LhCard title="読み込み中" loading />
</template>

Card API

Props

プロパティ	説明	型	デフォルト値
title	カードのタイトル（header スロットでも設定可能）	`string`	—
shadow	シャドウを表示するタイミング	`"always" \| "hover" \| "never"`	`'always'`
clickable	カード全体をクリック可能にするかどうか（button のキーボードセマンティックを担います）	`boolean`	`false`
loading	読み込み中の状態：内容エリアがスケルトンでプレースホルダーされます	`boolean`	`false`
themeVars	コンポーネントレベルのテーマ変数（キーに自動的に --lh- プレフィックスが付きます）	`{ [x: string]: string; }`	—
bgPattern	紋様背景の URL（例: var(--lh-pattern-willow)）。グローバルのホワイトリスト制限を受けません	`string`	—
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

Events

イベント	説明	パラメータ
click	クリック可能なカードがクリックされたとき（マウスまたはキーボードの Enter/Space でトリガー）	`(e: Event) => void`

テーマ変数

以下の CSS 変数が .lh-card でデフォルト値として定義されており、themeVars でグローバルまたはコンポーネントレベルで上書きできます：

変数	説明	デフォルト値
`--lh-card-border-radius`	角丸	`border-radius-base + 2px`
`--lh-card-bg`	背景色	`--lh-bg-color`
`--lh-card-border-color`	ボーダー色	`--lh-border-color-light`
`--lh-card-header-padding` / `--lh-card-body-padding` / `--lh-card-footer-padding`	3 つの領域のパディング	`14px 20px` / `18px 20px` / `12px 20px`
`--lh-card-shadow` / `--lh-card-shadow-hover`	通常時／ホバー時のシャドウ	墨色を帯びた柔らかな二重シャドウ
`--lh-card-loading-bg` / `--lh-card-loading-highlight`	読み込みプレースホルダーの地の色／流光ハイライト	`--lh-border-color-light` / 紙色へと明るさを引き上げた混合色

Slots

スロット	説明
header	カスタムタイトルエリア
extra	タイトルエリア右側の追加内容
cover	カバー
default	メインの内容
footer	フッター

アクセシビリティ

クリック可能なカード：role="button" + tabindex="0" + Enter/Space でアクティベート（APG button pattern）
読み込み中：コンテナに aria-busy="true" を付け、プレースホルダー図形はスクリーンリーダーから隠します
キーボードのフォーカスリングは :focus-visible を使用し、マウスクリック時には表示されません

型定義

このコンポーネントが外部にエクスポートする TypeScript の型構造を以下に示します（packages/components/card/src/types.ts および @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義が表示されます。プロパティの説明は上の Props 表を参照してください）：

LhCardProps

export interface LhCardProps {
  /** カードのタイトル（header スロットでも設定可能） */
  title?: string
  /** シャドウを表示するタイミング */
  shadow?: LhCardShadow
  /** カード全体をクリック可能にするかどうか（button のキーボードセマンティックを担います） */
  clickable?: boolean
  /** 読み込み中の状態：内容エリアがスケルトンでプレースホルダーされます */
  loading?: boolean
  /** コンポーネントレベルのテーマ変数（キーに自動的に --lh- プレフィックスが付きます） */
  themeVars?: Record<string, string>
  /** 紋様背景の URL（例: var(--lh-pattern-willow)）。グローバルのホワイトリスト制限を受けません */
  bgPattern?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhCardShadow _{（@lh-ui/share/core/card より）}

/** カードのシャドウ表示タイミング */
export type LhCardShadow = 'always' | 'hover' | 'never'

Card カード ​

基本的な使い方 ​

ヘッダースロットと extra ​

カバーとフッター ​

カード全体をクリック可能 ​

読み込み中 ​

Card API ​

Props ​

Events ​

テーマ変数 ​

Slots ​

アクセシビリティ ​

型定義 ​