Ionic单选按钮

单选按钮是一种包含布尔值的输入组件。它类似于HTML单选输入。与其他Ionic组件一样, 每个平台上Ionic单选按钮的样式也不同。无线电组件通常用作组内一组相关选项, 但也可以单独使用。可以通过选择单选按钮选项来对其进行检查, 也可以通过设置选中属性来以编程方式对其进行检查。它还使用禁用的属性来禁止用户更改值。

<ion-radio-group>组件可用于对一组无线电进行分组。它允许你从一组中最多选择一个单选按钮。换句话说, 当单选组包含许多单选选项时, 任何时候都只会选中一个单选选项。如果我们在组内选择任何单选选项, 它将取消选中先前选择的单选选项。如果无线电选项不在与另一个无线电的组中, 则可以同时检查两个无线电。

例

在以下示例中, 我们可以看到Ionic应用程序中的单选按钮如何工作。

<ion-header>
  <ion-toolbar>
    <ion-title>
      RadioButton
    </ion-title>
  </ion-toolbar>
</ion-header>
     
<ion-content class="padding" color="light">
 <!-- Radio Button in a List -->
 <ion-list>
    <ion-radio-group>
      <ion-list-header>
        Subject
      </ion-list-header>
  
      <ion-item>
        <ion-label>Java</ion-label>
        <ion-radio value="java"></ion-radio>
      </ion-item>
  
      <ion-item>
        <ion-label>Python</ion-label>
        <ion-radio value="python"></ion-radio>
      </ion-item>
    </ion-radio-group>
    <ion-radio-group>
      <ion-item>
        <ion-label>Android</ion-label>
        <ion-radio value="android"></ion-radio>
      </ion-item>
  
      <ion-item>
        <ion-label>Ionic</ion-label>
        <ion-radio value="ionic"></ion-radio>
      </ion-item>
  
      <ion-item>
        <ion-label>Angular</ion-label>
        <ion-radio value="angular"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</ion-content>

输出量

多个单选按钮组

有时你想要创建多个单选按钮。Ionic单选按钮提供<ion-radio-group>元素以创建多组单选按钮。

例

以下示例说明了如何创建多组单选按钮。在这里, 我们还将看到单选按钮的checked和disabled属性的用法。

<ion-header>
  <ion-toolbar>
    <ion-title>
      RadioButton
    </ion-title>
  </ion-toolbar>
</ion-header>
     
<ion-content class="padding" color="light">
 <!-- Radio Button in a List -->
 <ion-list>
    <ion-radio-group>
      <ion-list-header>
        CS Subject
      </ion-list-header>
      <ion-item>
        <ion-label>Java</ion-label>
        <ion-radio value="java"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Python</ion-label>
        <ion-radio checked="true" value="python"></ion-radio>
      </ion-item>
    </ion-radio-group>
    <ion-radio-group>
      <ion-item>
        <ion-label>Android</ion-label>
        <ion-radio value="android"></ion-radio>
      </ion-item>
    </ion-radio-group>

    <ion-radio-group>
      <ion-list-header>
        Auto Manufacturers
      </ion-list-header>
      <ion-item>
        <ion-label>Cord</ion-label>
        <ion-radio value="cord"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Duesenberg</ion-label>
        <ion-radio disabled="true" value="duesenberg"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Hudson</ion-label>
        <ion-radio checked="true" value="hudson"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</ion-content>

输出量

执行应用程序时, 将显示以下屏幕。在这里, Group1是CS主题, 第二个项目使用选中的属性, 而Group2是Auto Manufactures, 第二个选项使用禁用的属性。