安装

tnpm install --save @alipay/mas-promo-card

组件介绍

行业小程序营销卡片组件

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 | --- | --- | --- | --- | --- | --- | className | 否 | String | 容器类名 | - | 容器类型 | logo | 否 | String | 卡片左侧logo | - | - | title | 否 | String | 卡片标题 | - | 加油满200减10元 | subTitle | 否 | String | 卡片副标题 | - | 浙江中石油通用券 | progress | 否 | Number/false | 进度条，false 则不显示进度条，值的范围需要 >= 0 && <= 100 | - | 50 | buttonText | 否 | String | 按钮文案 | 立即领取 | 我是文案 | buttonDisabled | 否 | String | 按钮是否禁用 | false | true/false |

在小程序中使用

{
  "usingComponents": {
    "mas-promo-card": "@alipay/mas-promo-card/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-promo-card
    logo="{{ logo }}"
    title="{{ title }}"
    subTitle="{{ subTitle }}"
    progress="{{ progress }}"
    buttonText="{{ buttonText }}"
    buttonDisabled="{{ buttonDisabled }}"
    onButtonClick="onButtonClick"
  />

Badges

[![install size][install-size-image]][install-size-url]

样式覆盖推荐方式说明

可以传递 className 的 props 达到组件外层容器类名覆盖

axml

<mas-promo-card
  className="custom-class"
/>

less

.custom-class {
  padding: 0 32rpx;
  ...
}