Card 卡片
通用卡片容器，承载文字、列表、图片、段落等内容。
基础用法
通过 header 属性设置卡片标题。
卡片标题
卡片内容。这是一些描述文本。
卡片可以承载文字、列表、图片段落等。
基础用法
简洁卡片
可以省略标题，只保留内容区域。
没有标题的简洁卡片。
简洁卡片
带额外操作
使用 #extra 插槽在标题栏右侧添加操作按钮。
卡片标题
带有额外操作的卡片。
带额外操作
阴影效果
通过 shadow 属性控制卡片阴影的显示时机。
总是显示阴影
这个卡片总是显示阴影。
悬浮时显示阴影
这个卡片只在鼠标悬浮时显示阴影。
从不显示阴影
这个卡片从不显示阴影。
阴影效果
悬浮效果
设置 hoverable 属性可以在鼠标悬浮时产生提升效果。
可悬浮卡片
鼠标悬浮时会有提升效果。
悬浮效果
加载状态
设置 loading 属性可以显示骨架屏加载状态。
加载状态
带底部
使用 #footer 插槽添加底部内容。
带底部的卡片
卡片内容区域。
带底部
不同尺寸
通过 size 属性设置卡片尺寸。
小型卡片
小尺寸的卡片。
默认卡片
默认尺寸的卡片。
大型卡片
大尺寸的卡片。
不同尺寸
无边框
设置 bordered 为 false 可以去掉边框。
无边框卡片
没有边框的卡片。
无边框
在 Nuxt 中使用
Card 组件完美支持 Nuxt 3/4 环境。由于它主要用于结构化布局，服务端渲染（SSR）可以预先生成完整的 DOM 结构，有利于 SEO 优化和首屏渲染性能。
Nuxt 项目实战
在 Nuxt 中，Card 组件及其内部的所有子组件（如 Button, Tag）均已预置自动导入支持。
SSR ReadyAuto Import
Nuxt 中使用
SSR 注意事项：
- ✅ 标题 (header)、底部 (footer) 和内容区域在服务端完整渲染
- ✅ 阴影效果 (always/hover/never) 支持 SSR
- ✅ 骨架屏加载状态 (loading) 在服务端即展示首屏骨架，避免白屏
- ✅ 尺寸 (size) 和边框 (bordered) 配置通过 CSS 类名在服务端生效
- 💡 交互逻辑及动态加载状态切换在客户端激活（Hydration）后恢复响应性
SEO 优化
Card 组件生成的 HTML 语义清晰，建议在 header 插槽中使用合适的标题标签（如 h3），以进一步提升搜索引擎对页面内容的理解。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| header | 卡片标题 | string | — |
| body-style | 卡片内容区域的样式 | object | — |
| header-style | 卡片头部的样式 | object | — |
| shadow | 卡片阴影显示时机 | 'always' | 'hover' | 'never' | 'always' |
| bordered | 是否显示边框 | boolean | true |
| hoverable | 是否可悬浮（鼠标悬浮时有提升效果） | boolean | false |
| size | 卡片的尺寸 | 'small' | 'default' | 'large' | 'default' |
| loading | 是否加载中 (显示骨架屏) | boolean | false |
| body-padding | 是否有内边距 | boolean | true |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 卡片内容 |
| header | 卡片标题 |
| extra | 卡片额外操作区域 |
| footer | 卡片底部内容 |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-card-bg-color | 背景颜色 | var(--yh-bg-color-overlay) |
--yh-card-border-color | 边框颜色 | var(--yh-border-color-light) |
--yh-card-border-radius | 圆角大小 | var(--yh-border-radius-base) |
--yh-card-header-padding | 头部内边距 | 18px 20px |
--yh-card-body-padding | 主体内边距 | 20px |
--yh-card-footer-padding | 底部内边距 | 18px 20px |
--yh-card-shadow | 卡片阴影 | var(--yh-box-shadow-light) |