Ionic4.x 中的 UI 组件(UI Components)表单相关组件

概述1、ion-input 单行文本框   2、ion-toggle 开关   3、ion-radio-group、ion-radio 单选按钮组   4、ion-checkbox 多选按钮组   5、ion-select 选择框   6、ion-textarea 多行文本框   <ion-list> <ion-item> <ion-label>用户名:</ion-label>

1、ion-input 单行文本框

 

2、ion-toggle 开关

 

3、ion-radio-group、ion-radio 单选按钮组

 

4、ion-checkBox 多选按钮组

 

5、ion-select 选择框

 

6、ion-textarea 多行文本框

 

<ion-List>  <ion-item>    <ion-label>用户名:</ion-label>    <ion-input [(ngModel)]="peopleInfo.username"></ion-input>  </ion-item>  <ion-item>    <ion-label>年 龄:</ion-label>    <ion-input [(ngModel)]="peopleInfo.age"></ion-input>  </ion-item></ion-List><ion-item>  <ion-label>是否本科</ion-label>  <ion-toggle slot="end" [(ngModel)]="peopleInfo.falg"></ion-toggle></ion-item><ion-List>  <ion-radio-group [(ngModel)]="peopleInfo.payType">    <ion-item>      <ion-avatar slot="start">        <img src="assets/alipay.png"> </ion-avatar>      <ion-label>支付宝</ion-label>      <ion-radio value=‘1‘ slot="end"></ion-radio>    </ion-item>    <ion-item>      <ion-avatar slot="start">        <img src="assets/weixinpay.png"> </ion-avatar>      <ion-label>微信</ion-label>      <ion-radio value=‘2‘ slot="end"></ion-radio>    </ion-item>  </ion-radio-group></ion-List><ion-List>  <ion-item *ngFor="let item of peopleInfo.checkBoxList">    <ion-label>{{item.val}}</ion-label>    <ion-checkBox slot="start" [(ngModel)]="item.isChecked"></ion-checkBox>  </ion-item></ion-List><ion-List>  <ion-select slot="end" [(ngModel)]="peopleInfo.city">    <ion-select-option *ngFor="let item of peopleInfo.cityList" [value]="item">{{item}}</ion-select-option>  </ion-select></ion-List><ion-List>  <ion-item>    <ion-textarea [(ngModel)]="peopleInfo.info"></ion-textarea>  </ion-item></ion-List>

总结

以上是内存溢出为你收集整理的Ionic4.x 中的 UI 组件(UI Components)表单相关组件全部内容，希望文章能够帮你解决Ionic4.x 中的 UI 组件(UI Components)表单相关组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。