Appearance
c7-card 卡片组件
基于 Element Plus 的 el-card
组件进行封装,提供了可展开/收起的卡片功能,支持自定义标题、色块等。
基础用法
最简单的卡片使用方式:
Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 卡片标题 | String | '' |
isShowColorBlock | 是否显示色块 | Boolean | false |
colorBlockColor | 色块颜色 | String | '#409eff' |
textSize | 标题文字大小 | String | 'h2' |
isBold | 标题是否加粗 | Boolean | true |
textSize 可选值
值 | 字体大小 | 说明 |
---|---|---|
h1 | 2em | 32px |
h2 | 1.5em | 24px |
h3 | 1.17em | 18.72px |
h4 | 1em | 16px |
h5 | 0.83em | 13.28px |
Slots
插槽名 | 说明 |
---|---|
default | 卡片内容区域 |
功能特性
- 可展开/收起:卡片内容支持展开和收起功能
- 自定义标题:支持自定义卡片标题文本
- 色块装饰:支持在标题前添加色块装饰
- 文字样式:支持自定义标题文字大小和粗细
- 过渡动画:展开/收起时有平滑的过渡动画
使用说明
- 标题设置:通过
label
属性设置卡片标题 - 色块显示:设置
isShowColorBlock
为true
显示色块 - 色块颜色:通过
colorBlockColor
自定义色块颜色 - 文字样式:通过
textSize
和isBold
控制标题样式