Skip to content

c7-card 卡片组件

基于 Element Plus 的 el-card 组件进行封装,提供了可展开/收起的卡片功能,支持自定义标题、色块等。

基础用法

最简单的卡片使用方式:

Attributes

属性名说明类型默认值
label卡片标题String''
isShowColorBlock是否显示色块Booleanfalse
colorBlockColor色块颜色String'#409eff'
textSize标题文字大小String'h2'
isBold标题是否加粗Booleantrue

textSize 可选值

字体大小说明
h12em32px
h21.5em24px
h31.17em18.72px
h41em16px
h50.83em13.28px

Slots

插槽名说明
default卡片内容区域

功能特性

  1. 可展开/收起:卡片内容支持展开和收起功能
  2. 自定义标题:支持自定义卡片标题文本
  3. 色块装饰:支持在标题前添加色块装饰
  4. 文字样式:支持自定义标题文字大小和粗细
  5. 过渡动画:展开/收起时有平滑的过渡动画

使用说明

  1. 标题设置:通过 label 属性设置卡片标题
  2. 色块显示:设置 isShowColorBlocktrue 显示色块
  3. 色块颜色:通过 colorBlockColor 自定义色块颜色
  4. 文字样式:通过 textSizeisBold 控制标题样式