Card 卡片
将信息聚合在卡片容器中展示。
基础用法
包含标题、内容和操作。
卡片标题
这是一个基础的卡片组件，包含标题和内容。
卡片可以承载文字、列表、图片、段落等各种类型的内容。
简单卡片
卡片可以只有内容区域。
这是一个简单的卡片，只包含内容区域。
适用于展示简单的信息内容。
带操作区域的卡片
卡片可以配置操作区域。
用户信息
姓名：张三
邮箱：zhangsan@example.com
部门：技术部
自定义标题
使用具名插槽自定义卡片标题。
📊 数据统计
5
今日访问量：1,234
新增用户：56
活跃用户：789
不同尺寸
Card 组件提供四种尺寸，可以在不同场景下选择合适的卡片尺寸。
超小卡片
这是一个超小尺寸的卡片。
小型卡片
这是一个小尺寸的卡片。
中等卡片
这是一个中等尺寸的卡片（默认）。
大型卡片
这是一个大尺寸的卡片。
阴影效果
可以设置卡片的阴影显示时机。
总是显示阴影
这个卡片总是显示阴影效果。
悬停显示阴影
这个卡片在悬停时显示阴影效果。
从不显示阴影
这个卡片从不显示阴影效果。
可悬停卡片
设置 hoverable 属性使卡片可悬停，悬停时会有轻微的上移效果。
产品 A
这是产品 A 的详细描述信息。
价格：¥299
产品 B
这是产品 B 的详细描述信息。
价格：¥399
产品 C
这是产品 C 的详细描述信息。
价格：¥499
自定义内边距
可以自定义卡片主体的内边距。
默认内边距
这个卡片使用默认的内边距。
自定义内边距
这个卡片使用 32px 的内边距。
字符串内边距
这个卡片使用 8px 16px 的内边距。
无内边距
这个卡片主体没有内边距，内容区域有自定义背景。
无边框卡片
设置 :border="false" 可以移除卡片边框。
无边框卡片
这个卡片没有边框，适合在有背景的容器中使用。
通常与阴影效果配合使用来区分层次。
卡片网格
使用 CSS Grid 布局展示多个卡片。
📈 销售数据
本月销售额：¥125,000
环比增长：+12.5%
👥 用户统计
活跃用户：8,456
新增用户：+234
📦 订单管理
待处理订单：23
今日完成：156
⚠️ 系统警告
磁盘使用率：85%
内存使用率：72%
API
Card Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| header | string | — | 卡片标题 |
| size | 'tiny' | 'small' | 'medium' | 'large' | 'medium' | 卡片尺寸 |
| shadow | 'always' | 'hover' | 'never' | 'always' | 阴影显示时机 |
| bodyPadding | number | string | — | 卡片主体内边距 |
| border | boolean | true | 是否显示边框 |
| hoverable | boolean | false | 是否可悬停 |
| customClass | string | — | 自定义类名 |
| customStyle | string | object | — | 自定义样式 |
Card Events
| 名称 | 参数 | 说明 |
|---|---|---|
| click | (event: MouseEvent) => void | 卡片点击事件 |
Card Slots
| 名称 | 说明 |
|---|---|
| default | 卡片主体内容 |
| header | 卡片标题内容，会覆盖 header 属性 |
| footer | 卡片底部内容，通常放置操作按钮 |
设计指南
何时使用
- 需要将相关信息组织在一起展示时
- 作为其他组件的容器使用
- 需要突出显示某块内容时
- 构建仪表板或数据展示界面时
最佳实践
- 内容组织：将相关的信息放在同一张卡片中，保持内容的逻辑性
- 操作按钮：将主要操作放在卡片底部，次要操作可以放在标题区域
- 响应式设计：在移动端使用单列布局，桌面端可以使用网格布局
- 视觉层次：使用不同的阴影效果来区分卡片的重要性
- 交互反馈：对于可点击的卡片，使用
hoverable属性提供视觉反馈
无障碍性
- 卡片支持键盘导航和屏幕阅读器
- 使用语义化的 HTML 结构
- 为交互元素提供适当的焦点样式
- 支持高对比度模式和减少动画模式