Skip to content

FaCard 卡片

基础卡片容器组件,支持标题、描述、内容和页脚区域。

使用场景

  • 信息展示卡片
  • 表单容器
  • 数据统计卡片
  • 列表项容器
  • 对话框内容区

Props

属性类型默认值说明
titlestring-卡片标题
descriptionstring-卡片描述
classHTMLAttributes['class']-卡片容器 CSS 类
headerClassHTMLAttributes['class']-卡片头部 CSS 类
contentClassHTMLAttributes['class']-卡片内容 CSS 类
footerClassHTMLAttributes['class']-卡片页脚 CSS 类

Slots

名称说明
header卡片头部(会覆盖 titledescription
default卡片内容
footer卡片页脚

注意事项

  1. 区域显示:只有提供对应内容(props 或 slots)的区域才会显示
  2. slot 优先:如果提供了 header slot,会覆盖 titledescription props
  3. 结构组成:卡片由 CardHeader、CardContent、CardFooter 三部分组成
  4. 响应式:卡片宽度自适应父容器,可通过 class 设置固定宽度