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>
  1. data: {
  2.   loading: false,
  3. },
  4. handleChange(e) {
  5.   this.setData({
  6.     loading: e.detail.value,
  7.   })
  8. },

API

Attribute 属性

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

Event 事件

事件名说明参数
onHdClickheader被点击回调-
onBdClickbody被点击回调-

Slot 插槽

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

Class 自定义类名

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