Card 卡片

展示型容器，用于展示标题，信息等突出内容。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

示例

基础用法

可通过title设置标题

<pi-card title="基础用法" />

配合pi-section设置标题

可通过使用`pi-section`设置`title slot`
<pi-card>
  <pi-section slot="title" padding="0" title="配合 pi-section 设置标题" show-right-icon />
</pi-card>

自定义卡片内容

可通过使用body slot设置卡片内容

<pi-card title="自定义卡片内容">
  <template slot="body">
    最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
  </template>
</pi-card>

自定义卡片脚部

可通过使用footer slot设置卡片底部

<pi-card title="自定义卡片内容和脚部">
  <template slot="body">
    最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
  </template>
  <view slot="footer" class="pi-justify-end">
    <pi-button type="primary" size="small">确认</pi-button>
  </view>
</pi-card>

Props

名称	描述	类型	必选	默认值
customStyle	自定义样式，对象形式	Object	false	{}
customClass	自定义样式类，字符串形式	String	false	''
title	标题	String	false	''
titleStyle	标题自定义样式，对象形式	Object	false	{}
margin	卡片外边距	String	false	24rpx 0
padding	卡片内边距	String	false	24rpx 0

Events

事件名	描述	参数
click	-	-

Slots

名称	描述	插槽内容
title	标题插槽	-
body	内容插槽	-
footer	底部插槽	-