Card 卡片
将信息聚合在卡片容器中展示。
何时使用
- 概览展示一组信息
- 信息组合成的入口卡片
- 列表项的独立单元
基本使用
通过 header 设置卡片标题,默认插槽放内容。
阴影效果
shadow 控制阴影显示时机:always(默认)/ hover / never。
自定义标题区
header 插槽完全自定义标题,可以放图标、按钮、副标题等。
不带标题
不传 header 也不传 header slot 时,卡片只显示内容区。
自定义内容内边距
body-style 接受 CSS 对象,覆盖默认 20px padding。
卡片栅格
配合 c-row / c-col 实现卡片栅格,常见于仪表盘。
卡片元数据(c-card-meta)
<c-card-meta> 提供「头像 + 标题 + 描述」标准三段元素,常用于商品 / 用户 / 文章卡片。
卡片底部操作
用 default slot 内部把内容与操作行分两段;c-divider 隔开,操作按钮靠右是常见排版。
悬停高亮列表
shadow="hover" 让卡片只在鼠标悬停时显阴影,配合列表网格做「可点击的卡片入口」效果。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| header | string | '' | 卡片标题(也可用 header slot 自定义) |
| bodyStyle | object | { padding: '20px' } | 内容区样式 |
| shadow | 'always' | 'hover' | 'never' | 'always' | 阴影显示时机 |
Slots
| 名称 | 说明 |
|---|---|
| default | 卡片内容 |
| header | 自定义标题区 |