支付寶小程序擴(kuò)展表單 單選框·AMRadio

單選框。具體用法和小程序框架中 radio 保持一致，在 radio 基礎(chǔ)上做了樣式的封裝。

掃碼體驗(yàn)

示例代碼

{
 "defaultTitle": "am-radio",
 "usingComponents": {
   "am-radio": "mini-ali-ui/es/am-radio/index",
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/es/list/list-item/index"
 }
}
<view class="page">
 <view class="page-description">單選框</view>
 <view class="page-section">
   <view class="section section_gap">
     <form onSubmit="onSubmit" onReset="onReset">
       <view class="page-section-demo">
         <radio-group class="radio-group" onChange="radioChange" name="lib">
           <label class="radio" a:for="{{items}}" key="label-{{index}}">
             <am-radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
             <view style="display:inline-block;">{{item.desc}}</text>
           </label>
         </radio-group>
       </view>
       <view class="page-section-demo">
         <radio-group class="radio-group" onChange="radioChange" name="lib">
           <label class="radio" a:for="{{items1}}" key="label-{{index}}">
             <am-radio value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
             <view style="display:inline-block;">{{item.desc}}</text>
           </label>
         </radio-group>
       </view>
     </form>
   </view>
 </view>
</view>
.radio {
 display: flex; align-items: center;
}
.page-section-demo {
 padding: 24rpx;
}
Page({
 data: {
   items: [
     { checked: true, disabled: false, value: 'a', desc: '單選框-默認(rèn)選中', id: 'checkbox1' },
     { checked: false, disabled: false, value: 'b', desc: '單選框-默認(rèn)未選中', id: 'checkbox2' },
   ],
   items1: [
     { checked: true, disabled: true, value: 'c', desc: '單選框-默認(rèn)選中disabled', id: 'checkbox3' },
   ],
 },
 radioChange() {
 },
});

屬性