Card 卡片

用于承载带头部、正文和底部内容的卡片。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 信息卡片 -->
<fui-card title="通知" tag="今天">
  <text>这里是卡片内容</text>
</fui-card>

属性

属性	类型	说明	官网默认值
margin	Array	外边距，顺序同 CSS	['0', '32rpx']
full	Boolean	是否通栏；为 true 时左右外边距失效	false
background	String	卡片背景色	#fff
radius	String	卡片圆角；非 nvue 端无边框时生效	16rpx
shadow	String	无边框时的阴影	0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)
showBorder	Boolean	是否显示外边框；启用时不使用阴影	false
borderColor	String	外边框颜色；非 nvue 端使用主题变量	#EEEEEE
headerBackground	String	头部背景色	#fff
headerLine	Boolean	是否显示头部下方分隔线	true
footerLine	Boolean	是否显示正文和底部之间的分隔线	false
lineColor	String	分隔线颜色；非 nvue 端使用主题变量	#EEEEEE
padding	Array	头部内边距，顺序同 CSS	['20rpx', '20rpx']
src	String	头部图像地址	空
width	Number、String	头部图像宽度，单位 rpx	64
height	Number、String	头部图像高度，单位 rpx	64
imageRadius	String	图像圆角	8rpx
title	String	头部标题	空
size	Number、String	标题字号，单位 rpx	30
color	String	标题颜色	#7F7F7F
tag	String	头部附加文字	空
tagSize	Number、String	附加文字字号，单位 rpx	24
tagColor	String	附加文字颜色	#b2b2b2
index	Number	点击事件携带的索引	0

事件

事件	说明	回调参数
click	点击卡片	{ index }

版本及平台说明

官网标注 elevation 已在 V2.0 起移除，本地源码也未声明该属性。非 nvue 平台的边框颜色请使用对应的主题变量。

插槽

插槽	说明
default	卡片正文内容
footer	底部自定义内容