安装
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;
...
}