Card 卡片

概述

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

温馨提示

页面重置组件class样式时如果未生效，需在样式后加上 !important。 V2.3.0+ 支持

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "卡片",
  "usingComponents": {
    "fui-card": "/components/firstui/fui-card/fui-card"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-card": "components/firstui/fui-card/fui-card"
  }

代码演示

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

基础使用

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

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

通栏展示

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

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

Slots

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

Props

属性名	类型	说明	默认值	其他说明
margin	String	margin值	0 32rpx	-
full	Boolean	是否通栏，为true时margin-left，margin-right失效	false	-
background	String	背景色	#fff	-
radius	String	圆角值	16rpx	showBorder为false时生效
shadow	String	阴影，showBorder为false时有效	0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)	-
showBorder	Boolean	是否显示边框，为true时box-shadow失效	false	-
borderColor	String	边框颜色	#EEEEEE	为空时可通过css变量（--fui-color-border）修改
headerBackground	String	header部分背景色	#fff	-
headerLine	Boolean	是否需要header底部线条	true	-
footerLine V1.7.0+	Boolean	是否需要内容与footer之间线条	false	-
padding	String	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

事件名	说明	回调参数
bind:click	点击Card时触发	event.detail = {   index:索引 }

示例预览