ionic4 ion-button，radio双向数据绑定，checkbox双向数据绑定，select 双向数据绑定，searchbar组件，segment组件

ion-button

<ion-button expend="block/full"     fill="clear/outline"    
size="large/small"     mode="ios/md" >
expend="block/full"    控制宽度   有无圆角
fill="clear/outline"   设置背景填充
size="large/small"     按钮大小
mode="ios/md"          平台iOS/Android
例如：返回键
<ion-buttons slot="start/end">
   <ion-back-button></ion-back-button>
</ion-buttons>
slot="start/end"       显示的位置 左边/右边
例如：指定返回页面
<ion-buttons slot="start/end">
   <ion-back-button defaultHref="/home" text="返回"></ion-back-button>
</ion-buttons>
slot="start/end"       显示的位置 左边/右边
例如：带图标的按钮
<ion-button>
   <ion-icon name="add" slot="start/end"></ion-icon>
</ion-button>
例如：页面header/footer
<ion-header/ion-footer>
   <ion-toolbar>
      <ion-title>标题</ion-title>
      <ion-button>按钮</ion-button>
    </ion-toolbar>
 </ion-header/ion-footer>

radio 双向数据绑定

<ion-radio-group [(ngModel)]="person.pay">
  <ion-item>
     <ion-avatar slot="start">
        <img src="">
      </ion-avatar>
     <ion-radio slot="end" value="1"></ion-radio>
   </ion-item>
</ion-radio-group>

 [(ngModel)]="person.pay"    与   value="1"   一致
 必须写在   ion-radio-group 中
 

checkbox双向数据绑定

<ion-item-divider>
   <ion-label>爱好</ion-label>
</ion-item-divider>
<ion-item *ngFor="let item of items">
    <ion-checkbox slot="start" [(ngModel)]="item.isChacked"></ion-checkbox>
    <ion-label>{{item.title}}</ion-label>
</ion-item>

select 双向数据绑定

<ion-item >
    <ion-label>选择城市</ion-label>
    <ion-select multipie="true" [(ngModel)]="p.city">
        <ion-select-option *ngFor="let item of items" [value]="item">{{item}}</ion-select-option>
    </ion-select>
</ion-item>
 multipie="true"   添加之后可多选

searchbar组件

<ion-searchbar animated type="number" color="red" (ionChange)=""> 
animated   输入时动画   
type="number"     输入类型
color="red"   颜色
(ionChange)=""      输入框改变时

segment组件 类似tab切换

<ion-segment  [(ngModel)]="tabs" (ionChange)="segmentChanged($event)">
  <ion-segment-button value="plist">
      商品列表
  </ion-segment-button>
  <ion-segment-button value="pcontent">
      商品详情
  </ion-segment-button>
</ion-segment>  
<div [ngSwitch]="tabs">
  <div class="con1" *ngSwitchCase="'plist'">
      商品图文信息
  </div>
  <div class="con2" *ngSwitchCase="'pcontent'">
      商品详情
    </div>
</div>

也可用于header  像tab 
<ion-header>
  <ion-toolbar>
      <ion-segment [(ngModel)]="tab" color="success">
          <ion-segment-button value="tab1">
            <ion-label>简介</ion-label>
          </ion-segment-button>
          <ion-segment-button value="tab2">
            <ion-label>详情</ion-label>
          </ion-segment-button>
          <ion-segment-button value="tab3">
              <ion-label>评论</ion-label>
            </ion-segment-button>
        </ion-segment>    
  </ion-toolbar>
</ion-header>

<ion-content>
    <div class="info" [ngSwitch]="tab">
        <div *ngSwitchCase="'tab1'">
            商品简介   --注意ngSwitchCase写法
        </div>
        <div  *ngSwitchCase="'tab2'">
            商品详
        </div>
        <div  *ngSwitchCase="'tab3'">
              商品评论   
        </div>
      </div>
</ion-content>