ionic 单选框
ionic 单选框
Ionic是一个基于Angular框架的开源移动端应用开发框架,其中包含了众多基本组件,其中就包括单选框控件。
单选框组
单选框是从一组互斥的选项中选择一个选项的输入控件。Ionic中通过ion-radio-group
和ion-radio
来实现单选框,使用步骤:
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>选项1</ion-label>
<ion-radio></ion-radio>
</ion-item>
<ion-item>
<ion-label>选项2</ion-label>
<ion-radio></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
以上代码中,ion-list
为列表组件,ion-radio-group
为单选框组组件,内部添加ion-item
表示单选框选项,可以在ion-item
标签内添加ion-label
标签来表示每个选项的标签文字,ion-radio
用来表示单选框按钮。
组事件
使用ion-radio-group
可以通过ngModel
绑定当前选中的选项,并且可以添加ionChange
事件来监听选项改变事件,代码如下:
<ion-list>
<ion-radio-group (ionChange)="radioChanged($event)">
<ion-item>
<ion-label>选项1</ion-label>
<ion-radio [value]="'选项1'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>选项2</ion-label>
<ion-radio [value]="'选项2'"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
当选项改变时,会调用定义在组件中的radioChanged()
函数,可以在其中获取当前选中的选项。
@Component({
selector: 'my-page',
templateUrl: 'my-page.html'
})
export class MyPage {
selectedOption: string;
radioChanged(event) {
this.selectedOption = event.detail.value;
}
}
自定义选项
可以通过ion-radio
的slot
属性来对选项进行自定义,将自定义的内容放置在ion-radio
标签内部即可。代码如下:
<ion-list>
<ion-radio-group>
<ion-item>
<ion-label>选项1</ion-label>
<ion-radio slot="start">
<ion-icon name="star"></ion-icon>
</ion-radio>
<ion-radio slot="end"></ion-radio>
</ion-item>
<ion-item>
<ion-label>选项2</ion-label>
<ion-radio slot="start">
<ion-icon name="heart"></ion-icon>
</ion-radio>
<ion-radio slot="end">
<ion-icon name="bookmark"></ion-icon>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
以上代码中,自定义内容为在ion-radio
中插入了ion-icon
标签,分别表示开始和结束位置的自定义图标。
总结
以上便是ionic中单选框的使用方法和注意事项,通过上述内容,我们可以看到ionic具有灵活的组合方式和自定义能力,可以满足大部分单选框的使用场景,并且通过ngModel
和ionChange
事件可以方便地获取到当前选中项,方便进一步处理。