All Products
Search
Document Center

Card

Last Updated: Feb 04, 2021

This section describes the card component.

Property Description Type Default value Mandatory
thumb Card thumbnail address String - false
title Card title String - true
subTitle Card subtitle String - false
footer Text of the footer. String - false
footerImg Address of the footer image. String - false
onCardClick Callback when a card is tapped. (info: Object) => void - false
info Used to send data out when the card is tapped. String - false

Sample code

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "card": "mini-ali-ui/es/card/index"
  5. }
  6. }
  1. <card
  2. thumb="{{thumb}}"
  3. title="Title"
  4. subTitle="Subtitle is optional"
  5. onCardClick="onCardClick"
  6. footer="Description"
  7. footerImg="{{footerImg}}"
  8. info="Tap card"
  9. />
  1. Page({
  2. data: {
  3. tagData: [
  4. { date: '2018-05-14', tag: 'Pay mortgage', tagColor: 5 },
  5. { date: '2018-05-28', tag: 'Housing provident fund', tagColor: 2 },
  6. ],
  7. },
  8. handleSelect() {},
  9. onMonthChange() {},
  10. });