Ionic4.x UIコンポーネント（UIコンポーネント）スライド図カルーセルアセンブリ、検索バーコンポーネント、セグメント成分

スライドの図のカルーセルアセンブリ
Ionic4.x 図カルーセルアセンブリ内のベースとswiper プラグ、構成がスライドに要求される特性swiper API での

找
Swiperアピ：http://idangero.us/swiper/api/

 

< イオンヘッダ> 
  < イオンツールバー> 
    < イオンボタンスロット=「スタート」> 
      < イオンバックボタンdefaultHref =「/タブ/ TAB1」テキスト=「返回」> </ イオンバックボタン> 
    </ イオンボタン> 
    < イオンタイトル>スライド</ イオンタイトル> 
  </ イオンツールバー> 
</ イオンヘッダ> 
< イオン含量パディング> 
  < イオンスライドページャ=「true」に[オプション] = "slideOpts"＃1 slide1（ionSlideTouchEnd）= "slideDidChange（）" > 
    < イオンスライド> 
      < IMG SRC = "/資産/ slide01.png" ALT = "" > 
    </ イオンスライド> 
    < イオンスライド> 
      < IMG SRC =」 「/assets/slide02.png ALTを= "" > 
    </ イオンスライド> 
  </ イオンスライド> 
  < BR > 
  < イオンスライドページャ= "真" ＃slide2 > 
    <イオンスライド> 
      < IMGのSRC= "/資産/ slide02.png" ALT = "" > 
    </ イオンスライド> 
    < イオンスライド> 
      < IMG SRC = "/資産/ slide01.png" ALT = "" > 
    </ イオンスライド> 
    < イオン-slide > 
      < IMG SRC = "/資産/ 02.png" ALT = "" > 
    </ イオンスライド> 
    < イオンスライド> 
      < IMG SRC = "/資産/ 02.png" ALT = "" > 
    </ イオンスライド> 
  </ イオンスライド> 
  < イオンボタン（クリック）=「slideNext（）」> 
    次へジャンプするボタンをクリックします
  。</ イオンボタン> 
  < イオンボタン（クリック）=「slidePrev（）」> 
    へジャンプするボタンをクリックしてくださいP 
  </ イオンボタン> 
</ イオンコンテンツ>

検索バーコンポーネント

< イオンヘッダ> 
  < イオンツールバー> 
      < イオンボタンスロット=「スタート」> 
          < イオンバックボタンdefaultHref =「/タブ/ TAB1」テキスト=「返回」> </ イオンバックボタン> 
      </ イオンボタン> 
  </ イオンツールバー> 
</ イオンヘッダ> 

< イオン含量パディング> 
    < イオン検索バーのプレースホルダ=「フィルタスケジュール」> </ イオン検索バー> 
    <検索バーイオン・プレースホルダー=「の検索を入力してください」アニメーション> </ イオン検索バー> 
    < イオン検索バープレースホルダ=「コンテンツの検索を入力してください」のアニメーションタイプ=「数値」> </ イオン検索バー> 
    < イオン検索バーのプレースホルダーを=「コンテンツの検索を入力してください」のアニメーションの色を= "成功" > </ イオン検索バー> 
    < イオン検索バーのプレースホルダは= "テキストボックスを変更し、" デバウンス= "500" （ionChange）= "にDoChange（）" > </ イオン検索バー>      
</ イオンコンテンツ>

< イオンヘッダ> 
  < イオンツールバー> 

      < イオンボタンスロット=「スタート」> 
          < イオンバックボタンdefaultHref =「/タブ/ TAB1」テキスト=「返回」> </ イオンバックボタン> 
      </ イオンボタン> 
    < イオンタイトル>セグメント</ イオンタイトル> 
  </ イオンツールバー> 
</ イオンヘッダ> 

< イオン含量パディング> 


    < イオンセグメント[（ngModel）] =」タブ」 > 
      <イオンセグメントボタンの値=「TAB1」> 
        < イオンラベル>简介</ イオンラベル> 
      </ イオンセグメントボタン> 
      < イオンセグメントボタンの値=「TAB2」> 
        < イオンラベル>详情< / イオンラベル> 
      </ イオンセグメントボタン> 
      < イオンセグメントボタンの値=「TAB3」> 
          < イオンラベル>评论</ イオンラベル> 
        </ イオンセグメントボタン>
    </ イオンセグメント> 

    < のdiv クラス= "情報" [ngSwitch] = "タブ" > 

      < divの* ngSwitchCase = " 'TAB1'" > 
          はじめに-注意ngSwitchCase文言
      </ divの> 

      < divの   * ngSwitchCase = " 'TAB2'" > 
          製品詳細は

      </ DIV > 
      < DIV   * ngSwitchCase = " 'TAB3'" > 
        レビュー      
      </ DIV > 
    </ DIV > 
</ イオンコンテンツ>