This topic describes the single-choice selector, that is, radio.
This topic describes the single-choice selector, that is, radio.
radio-group
The single-choice selector group.
Attribute | Type | Default value | Description | Minimum version |
---|---|---|---|---|
onChange | EventHandle | - | Trigger when the selected item is modified, where | - |
name | String | - | The component name, which is used to submit the form to obtain data. | - |
radio
The single-choice item.
Attribute | Type | Default value | Description | Minimum version |
---|---|---|---|---|
value | String | - | The component value, which is the value carried by the change event when the component is selected. | - |
checked | Boolean | false | Whether the item is currently selected. | - |
disabled | Boolean | false | Whether to disable the button. | - |
color | String | - | The radio color, which can be a color code like blue, or a hexadecimal color code like #0000FF. |
Illustration
Code sample
<radio-group class="radio-group" onChange="radioChange">
<label class="radio" a:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
Page({
data: {
items: [
{name: 'angular', value: 'AngularJS'},
{name: 'react', value: 'React', checked: true},
{name: 'polymer', value: 'Polymer'},
{name: 'vue', value: 'Vue.js'},
{name: 'ember', value: 'Ember.js'},
{name: 'backbone', value: 'Backbone.js'},
]
},
radioChange: function(e) {
console.log('You have selected this framework: ', e.detail.value)
}
})