radio-group

radio-group dùng để nhóm các radio lại với nhau. Bên trong radio-group có thể chứa nhiều radio, nhưng tại một thời điểm chỉ có một radio có thể được chọn, các radio cần khai báo thuộc tính value

Thuộc tính

Thuộc tính	Kiểu dữ liệu	Mô tả
onChange	function	Sự kiện được gọi khi giá trị của các radio bị thay đổi, event.detail = { value: value }, value chính là giá trị của radio đang được chọn
name	string	Khai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form

Sample Code

index.txml

<view class="container">
  <view class="block">
    <radio-group class="radio-group" onChange="onChange">
      <view class="radio" tiki:for="{{items}}" key="radio-{{index}}">
        <radio value="{{item.name}}" checked="{{item.checked}}" />
        <text class="text">{{item.value}}</text>
      </view>
    </radio-group>
  </view>
</view>

index.js

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', disabled: true }
    ]
  },
  onChange(e) {
    console.log('onChange', e);
  }
});

index.tcss

.container {
  min-height: 100%;
  background-color: var(--gray20);
  padding: 16px;
}

.block {
  background-color: white;
  margin: 8px 0;
  padding: 16px;
  border-radius: var(--border-radius-rounded-4px);
}

.radio-group {
  display: flex;
  flex-direction: column;
}

.radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12px;
}

.text {
  margin-left: 12px;
}