1.0.0 • Published 3 years ago
@mas.io/mas-card-radio v1.0.0
安装
tnpm install --save @alipay/mas-card-radio
组件介绍
行业小程序mas-card-radio组件,结合mas的组件样式,针对支付宝行业的各个不同场景进行定制化开发,满足业务需求。
参数说明
属性
属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
---|---|---|---|---|---|
className | 否 | string | 容器类名 | --- | -- |
value | 是 | string / number | 选中的值 | --- | -- |
title | 否 | string | 标题 | --- | -- |
subTitle | 否 | string | 副标题 | --- | -- |
extra | 否 | string | 右侧信息 | --- | -- |
subExtra | 否 | string | 副信息 | --- | -- |
checked | 否 | boolean | 是否选中 | false | -- |
disabled | 否 | boolean | 是否禁用 | false | -- |
tags | 否 | String[] | 标签数组 | -- | 'aa', 'bb' |
事件
事件名 | 参数说明 | 备注 |
---|---|---|
onClick | ({ value,checked })=> void | 点击事件 |
插槽
插槽名称 | 描述 |
---|---|
extra | 右侧额外信息 |
details | 正文下方详细信息 |
在小程序中使用
{
"usingComponents": {
"mas-card-radio": "@alipay/mas-card-radio/es/index"
}
}
在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-radio-card
title="{{title}}"
subTitle="{{subTitle}}"
tags="{{tags}}"
extra="{{extra}}"
subExtra="{{subExtra}}"
>
</mas-radio-card>
<!-- slot 使用方式 -->
<mas-radio-card
title="{{title}}"
subTitle="{{subTitle}}"
tags="{{tags}}"
extra="{{extra}}"
subExtra="{{subExtra}}"
disabled="{{true}}"
>
<view slot="details">
slot details
</view>
<view slot="extra">
slot extra
</view>
</mas-radio-card>
Badges
1.0.0
3 years ago