Card 卡片，常用的布局组件。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 src 属性设置头像，图标图片地址，title 属性设置标题，tag 属性设置额外信息，如：时间等。

<wui-card :src="src" title="标题文字" tag="额外信息">
	<view class="wui-card__content">这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</view>
</wui-card>

通栏展示

通过 full 属性设置是否通栏，为 true时margin-left ，margin-right失效。

<wui-card :padding="['20rpx','32rpx']" full :src="src" title="标题文字" tag="额外信息">
<view class="wui-card__content wui-padding">这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</view>
</wui-card>

Slots

插槽名称	说明
default	Card主内容部分
footer	Card底部显示内容

Props

属性名	类型	说明	默认值	平台差异说明
margin	Array	margin值：[上,右,下,左]	['0', '32rpx']	-
full	Boolean	是否通栏，为true时margin-left，margin-right失效	false	-
background	String	背景色	#fff	-
radius	String	圆角值	16rpx	非nvue下showBorder为false时生效
shadow	String	阴影，showBorder为false时有效	0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)	nvue下，android无效
elevation	String	阴影，showBorder为false时有效	5px	仅android且nvue下有效，box-shadow失效
showBorder	Boolean	是否显示边框，为true时box-shadow和elevation失效	false	-
borderColor	String	边框颜色	#EEEEEE	仅nvue下生效，非nvue端通过css变量（--wui-color-border）修改
headerBackground	String	header部分背景色	#fff	-
headerLine	Boolean	是否需要header底部线条	true	-
footerLine	Boolean	是否需要内容与footer之间线条	false	-
lineColor	String	header 底部线条颜色	#EEEEEE	仅nvue有效，非nvue端通过css变量（--wui-color-border）修改
padding	Array	header padding值：[上,右,下,左]	['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	-

Events

事件名	说明	回调参数
@click	点击Card时触发	{ index:索引 }