Ionic单选按钮 _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="http://www.srcmini.com/java"> < /ion-radio> < /ion-item> < ion-item> < ion-label> Python< /ion-label> < ion-radio value="http://www.srcmini.com/python"> < /ion-radio> < /ion-item> < /ion-radio-group> < ion-radio-group> < ion-item> < ion-label> Android< /ion-label> < ion-radio value="http://www.srcmini.com/android"> < /ion-radio> < /ion-item> < ion-item> < ion-label> Ionic< /ion-label> < ion-radio value="http://www.srcmini.com/ionic"> < /ion-radio> < /ion-item> < ion-item> < ion-label> Angular< /ion-label> < ion-radio value="http://www.srcmini.com/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="http://www.srcmini.com/java"> < /ion-radio> < /ion-item> < ion-item> < ion-label> Python< /ion-label> < ion-radio checked="true" value="http://www.srcmini.com/python"> < /ion-radio> < /ion-item> < /ion-radio-group> < ion-radio-group> < ion-item> < ion-label> Android< /ion-label> < ion-radio value="http://www.srcmini.com/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="http://www.srcmini.com/cord"> < /ion-radio> < /ion-item> < ion-item> < ion-label> Duesenberg< /ion-label> < ion-radio disabled="true" value="http://www.srcmini.com/duesenberg"> < /ion-radio> < /ion-item> < ion-item> < ion-label> Hudson< /ion-label> < ion-radio checked="true" value="http://www.srcmini.com/hudson"> < /ion-radio> < /ion-item> < /ion-radio-group> < /ion-list> < /ion-content>

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