Card 卡片

用于组织信息和操作，通常也作为详细信息的入口。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Card",
  3.     "usingComponents": {
  4.         "wux-card": "../../dist/card/index",
  5.         "wux-wing-blank": "../../dist/wing-blank/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Card</view>
  4.         <view class="page__desc">卡片</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Default</view>
  8.         <wux-wing-blank size="default">
  9.             <wux-card title="卡片标题" extra="额外内容">
  10.                 <view slot="body">卡片内容</view>
  11.                 <view slot="footer">尾部内容</view>
  12.             </wux-card>
  13.         </wux-wing-blank>
  14.         <view class="sub-title">Thumb</view>
  15.         <wux-wing-blank size="default">
  16.             <wux-card title="卡片标题" extra="额外内容" thumb="https://wux.cdn.cloverstd.com/logo.png">
  17.                 <view slot="body">卡片内容</view>
  18.                 <view slot="footer">尾部内容</view>
  19.             </wux-card>
  20.         </wux-wing-blank>
  21.         <view class="sub-title">Custom thumb style</view>
  22.         <wux-wing-blank size="default">
  23.             <wux-card title="卡片标题" extra="额外内容" thumb="https://wux.cdn.cloverstd.com/logo.png" thumb-style="border-radius: 50%;">
  24.                 <view slot="body">卡片内容</view>
  25.                 <view slot="footer">尾部内容</view>
  26.             </wux-card>
  27.         </wux-wing-blank>
  28.         <view class="sub-title">No border</view>
  29.         <wux-wing-blank size="default">
  30.             <wux-card bordered="{{ false }}" title="卡片标题" extra="额外内容" thumb="https://wux.cdn.cloverstd.com/logo.png">
  31.                 <view slot="body">卡片内容</view>
  32.                 <view slot="footer">尾部内容</view>
  33.             </wux-card>
  34.         </wux-wing-blank>
  35.         <view class="sub-title">Full</view>
  36.         <wux-card full="{{ true }}" title="卡片标题" extra="额外内容" thumb="https://wux.cdn.cloverstd.com/logo.png">
  37.             <view slot="body">卡片内容</view>
  38.             <view slot="footer">尾部内容</view>
  39.         </wux-card>
  40.     </view>
  41. </view>

视频演示

Card

API

Card props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-card
bordered boolean 是否有边框 false
full boolean 是否通栏 false
title string 卡片标题 -
thumb string 卡片标题图片 -
thumbStyle string,object 标题图片样式 -
extra string 卡片标题辅助内容 -

Card slot

名称 描述
body 自定义内容
footer 自定义尾部内容

Card externalClasses

名称 描述
wux-class 根节点样式类