vant/packages/card/en-US.md

Card

Install

import { Card } from 'vant';

Vue.use(Card);

Usage

Basic Usage

<van-card
  title="Title"
  desc="Description"
  num="2"
  price="2.00"
  :thumb="imageURL"
/>

Advanced Usage

Use slot to custom content.

<van-card
  num="2"
  tag="Tag"
  title="Title"
  desc="Description"  
  price="2.00"
  :thumb="imageURL"
  origin-price="10.00"
>
  <div slot="footer">
    <van-button size="mini">Button</van-button>
    <van-button size="mini">Button</van-button>
  </div>
</van-card>

API

Attribute	Description	Type	Default
thumb	Left thumb image URL	String	-
title	Title	String	-
desc	Description	String	-
tag	Tag	String	-
num	Number	`String	Number`
price	Price	`String	Number`
origin-price	Origin price	`String	Number`
currency	Currency symbol	String	¥
thumb-link	Thumb link URL	String	-
lazy-load	Whether to enable thumb lazy load，should register Lazyload component	Boolean	false

Slot

name	Description
title	Custom title
desc	Custom description
num	Custom num
price	Custom price
thumb	Custom thumb
tags	Custom tags
footer	Custom footer