zoukankan      html  css  js  c++  java
  • Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1ion-input 单行文本框

    2ion-toggle 开关

    3ion-radio-groupion-radio 单选按钮组

    4ion-checkbox 多选按钮组

    5ion-select 选择框

    6ion-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>
  • 相关阅读:
    结对项目开始
    团队项目开始
    个人项目总结
    python面向对象
    OSI七层模型
    Django中的orm的惰性机制
    Python装饰器
    python运算符
    python元祖和列表
    Sencha Touch 1.x 快速入门 第三章 布局(2) Card布局
  • 原文地址:https://www.cnblogs.com/loaderman/p/10956098.html
Copyright © 2011-2022 走看看