Ionic4.x 中的 UI 組件(UI Components) Slides 輪播圖組件、Searchbar 組件、 Segment 組件

Slides 輪播圖組件
Ionic4.x 中的輪播圖組件是基於 swiper 插件，所以配置 slides 的屬性需要在 swiper 的 api 中

找
Swiper Api:http://idangero.us/swiper/api/

 

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>slides</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="slideDidChange()">
    <ion-slide>
      <img src="/assets/slide01.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/slide02.png" alt="">
    </ion-slide>
  </ion-slides>
  <br>
  <ion-slides pager="true" #slide2>
    <ion-slide>
      <img src="/assets/slide02.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/slide01.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/02.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="/assets/02.png" alt="">
    </ion-slide>
  </ion-slides>
  <ion-button (click)="slideNext()">
    點擊按鈕跳轉到下一頁
  </ion-button>
  <ion-button (click)="slidePrev()">
    點擊按鈕跳轉到上一頁
  </ion-button>
</ion-content>

Searchbar 組件

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
    <ion-searchbar placeholder="請輸入搜索的內容" animated></ion-searchbar>
    <ion-searchbar placeholder="請輸入搜索的內容" animated type="number"></ion-searchbar>
    <ion-searchbar placeholder="請輸入搜索的內容" animated  color="success"></ion-searchbar>
    <ion-searchbar placeholder="文本框改變" debounce="500" (ionChange)="doChange()"></ion-searchbar>     
</ion-content>

<ion-header>
  <ion-toolbar>

      <ion-buttons slot="start">
          <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
      </ion-buttons>
    <ion-title>segment</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>


    <ion-segment [(ngModel)]="tab">
      <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>

    <div class="info" [ngSwitch]="tab">

      <div *ngSwitchCase="'tab1'">
          商品簡介   --注意ngSwitchCase寫法
      </div>

      <div  *ngSwitchCase="'tab2'">
          商品詳情

      </div>
      <div  *ngSwitchCase="'tab3'">
        商品評論     
      </div>
    </div>
</ion-content>