AMRadio
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 |
disabled | Boolean | An indicator of whether to disable the radio selection. The default value is |
id | String | Radio ID, which is used in combination with the for property of the label component. |