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'