Ionic4.x UI components (UI Components) Slides FIG carousel assembly, Searchbar component, Segment Component

Slides carousel assembly of FIG
Ionic4.x in FIG carousel assembly is based swiper plug, the configuration slides properties required in swiper the api in

找
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 (the Click) = "slideNext ()" > 
    Click button to jump to the next 
  </ Ion-Button > 
  < Ion-Button (the Click) = "slidePrev ()" > 
    click on a button to jump to p 
  </ Ion-Button > 
</ Ion-Content >

Searchbar components

<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>
    <= "Please type in the search of"placeholdersearchbar-the IonAnimated > </ Ion-the searchbar > 
    < Ion-the searchbar placeholder = "Please enter content search" Animated type = "Number" > </ Ion-the searchbar > 
    < Ion-the searchbar placeholder = "Please enter content search" Animated Color = "Success" > </ Ion-the searchbar > 
    < Ion-the searchbar placeholder = "text box changed" Debounce = "500" (ionChange) = "doChange ()" > </ Ion-the 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'" > 
          Introduction - Note ngSwitchCase wording 
      </ div > 

      < div   * ngSwitchCase = " 'TAB2'" > 
          Product details 

      </ div > 
      < div   * ngSwitchCase = " 'TAB3'" > 
        reviews      
      </ div > 
    </ div > 
</ the Ion-Content >