Card 卡片

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-card": "wuss-weapp/w-card/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Card" desc="卡片" />
  3. <w-pane desc="Slot" />
  4. <w-card
  5.  loading="{{ loading }}"
  6.  title="标题"
  7.  extra="副标题"
  8.  content="内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区"
  9.  footer="底部信息"
  10.  footer-extra="底部副标题"
  11. />
  13. <view style="margin: 20px 0;" hover-class="none" hover-stop-propagation="false">
  14.   <w-cell-group>
  15.     <w-cell label="开启loading">
  16.       <w-switch color="#ff9900" slot="content" bind:onChange="handleChange" />
  17.     </w-cell>
  18.   </w-cell-group>
  19. </view>
  21. <w-pane desc="Full" />
  22. <w-card
  23.  full
  24.  shadow="{{ false }}"
  25.  title="标题"
  26.  extra="副标题"
  27.  content="内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区内容区"
  28.  footer="底部信息"
  29.  footer-extra="底部副标题"
  30. />
  32. <w-pane desc="Slot" />
  33. <w-card>
  34.     <view
  35.      slot="title"
  36.      class="w-card-title"
  37.      hover-class="none"
  38.      hover-stop-propagation="false"
  39.     >
  40.         标题
  41.     </view>
  42.     <view
  43.      slot="extra"
  44.      class="w-card-extra"
  45.      hover-class="none"
  46.      hover-stop-propagation="false"
  47.     >
  48.         副标题
  49.     </view>
  50.     <view
  51.      slot="content"
  52.      class="w-card-content"
  53.      hover-class="none"
  54.      hover-stop-propagation="false"
  55.     >
  56.         内容区内容区内容区内容区内容区内容区内容区内容区
  57.     </view>
  58.     <view
  59.      slot="footer"
  60.      class="w-card-footer"
  61.      hover-class="none"
  62.      hover-stop-propagation="false"
  63.     >
  64.         底部
  65.     </view>
  66.     <view
  67.      slot="footer-extra"
  68.      class="w-card-footer-extra"
  69.      hover-class="none"
  70.      hover-stop-propagation="false"
  71.     >
  72.         底部extra
  73.     </view>
  74. </w-card>
data: {
  loading: false,
},
handleChange(e) {
  this.setData({
    loading: e.detail.value,
  })
},

css

API

Attribute 属性

属性 说明 类型 默认值
full 通栏模式 boolean -
title 头部标题 string -
extra 头部副标题 string -
content 内容区信息 string -
footer 底部标题 string -
footerExtra 底部副标题 string -
shadow 开启卡片阴影 boolean true
loading 进入loading模式 boolean false

Event 事件

事件名 说明 参数
onHdClick header被点击回调 -
onBdClick body被点击回调 -

Slot 插槽

| 名称 | 说明 | | content | 内容区信息 | | footer | 底部标题 | | footer-extra | 底部副标题 | | title | 头部标题 | | extra | 头部副标题 |

Class 自定义类名

类名 说明
wuss-class 根节点样式类
wuss-class-hd 头部样式类
wuss-class-bd 内容部样式类
wuss-class-ft 底部样式类