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 props にマッピングされ、デフォルトスロットは children になります。

スタイル

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

基本的な使い方​

Card Props​

Card イベント​

スタイル​

基本的な使い方

Card Props

Card イベント

スタイル