Skip to content

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

参数类型默认值说明
headerstring''卡片标题(也可用 header slot 自定义)
bodyStyleobject{ padding: '20px' }内容区样式
shadow'always' | 'hover' | 'never''always'阴影显示时机

Slots

名称说明
default卡片内容
header自定义标题区

Released under the MIT License.