AMRadio

2021-07-06 11:36

You can use the am-radio component to allow users to select radio buttons. The specific usage is consistent with the basic radio component, but more styles are added in the extended am-switch component.

Sample code

See the sample codes in different languages:

.json

copy

{
 "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"
 }
}

.axml

copy

<view class="page">
 <view class="page-description">AMRdiao</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>

.acss

copy

.radio {
 display: flex; align-items: center;
}
.page-section-demo {
 padding: 24rpx;
}

.js

copy

Page({
 data: {
   items: [
     { checked: true, disabled: false, value: 'a', desc: 'AMRadio-checked', id: 'checkbox1' },
     { checked: false, disabled: false, value: 'b', desc: 'AMRadio-unchecked', id: 'checkbox2' },
   ],
   items1: [
     { checked: true, disabled: true, value: 'c', desc: 'AMRadio-checked disabled', id: 'checkbox3' },
   ],
 },
 radioChange() {
 },
});

Parameters

Property	Type	Description
value	String	Component value. When the radio is selected, the component value is obtained by the onChange event.
checked	Boolean	An indicator of whether the radio is selected. The default value is `false`.
disabled	Boolean	An indicator of whether to disable the radio selection. The default value is `false`.
id	String	Radio ID, which is used in combination with the for property of the label component.