<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 項目總結關于ionic3中的ion-segment的總結

          2018-5-30    seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          目前做的項目是ionic3和angular4.0的結合,所以用到了很多關于ionic3中封裝好的標簽,例如具有輪播效果的ion-slides和ion-slide等。那么這次就要總結一下另外一個標簽ion-segment的用法了。 
          ion-segment這個標簽以前用的很少,幾乎沒有用過。它主要是一組按鈕,有時稱為分段控件,之前都是用button按鈕,現在知道了,開始用ion-segment,因為它有自帶的樣式,這樣就可節省很多時間,同時呢允許用戶與許多控件的緊湊組進行交互。 分段提供與標簽相似的功能,選擇一個將取消選擇所有其他選項。 當您希望讓用戶在應用程序的不同頁面之間來回移動時,應使用選項卡欄而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。 
          下面來看一段代碼:

          Segment 在頭部使用

          <ion-header> <ion-toolbar> <ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment-button value="camera"> <ion-icon name="camera">帶iocn</ion-icon> </ion-segment-button> <ion-segment-button value="bookmark"> 頭部使用Segment <ion-icon name="bookmark"></ion-icon> </ion-segment-button> </ion-segment> </ion-toolbar> </ion-header>
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          Segment 在內容里面使用

          <ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在內容里面使用 </ion-segment-button> <ion-segment-button value="enemies"> 可以綁定一個事件(ionChange) </ion-segment-button> </ion-segment>
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8

          Segment 在表單里面使用

          <form [formGroup]="myForm"> <ion-segment formControlName="mapStyle" color="danger"> <ion-segment-button value="standard"> Standard </ion-segment-button> <ion-segment-button value="hybrid"> 表單內使用 </ion-segment-button> <ion-segment-button value="sat"> Satellite </ion-segment-button> </ion-segment> </form>
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          Segment 配合ngSwitch使用
          <ion-segment [(ngModel)]="change"> <ion-segment-button value="apple"> 蘋果 </ion-segment-button> <ion-segment-button value="pie"></ion-segment-button> </ion-segment> <div [ngSwitch]="change"> <div *ngSwitchCase="'apple'">
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          蘋果顯示,如果要默認顯示一個就把默認的那個設置一個初始值比如要默認顯示蘋果就把蘋果的value值設置成change也就是說,在定義change變量的時候,需要把哪個設置為默認顯示就把哪個的value值賦值給change作為初始值 public change=”pie”;


          藍藍設計www.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          亚洲欧洲日产国码无码久久99| 区久久AAA片69亚洲| 99久久精品影院老鸭窝| 久久97精品久久久久久久不卡| 伊人久久大香线蕉精品| 久久99精品久久久久久9蜜桃| 国产亚洲精久久久久久无码| 久久精品成人国产午夜| 久久久久国色AV免费观看| 欧美国产成人久久精品| 国产亚洲综合久久系列| 欧美色综合久久久久久| 久久99久久99精品免视看动漫| 国产午夜精品久久久久九九| 亚洲国产精品无码久久九九| 人妻无码αv中文字幕久久 | 思思久久好好热精品国产| 久久久久久人妻无码| 精品久久久久久无码国产| 久久亚洲精品国产精品| 亚洲欧洲精品成人久久奇米网| 色综合久久久久网| 欧美一区二区三区久久综| 亚洲人成电影网站久久| 国产成人精品久久一区二区三区av | 久久精品国产亚洲AV麻豆网站| 久久久久国产一级毛片高清板| 久久精品国产亚洲一区二区| 久久精品蜜芽亚洲国产AV| 久久综合亚洲色一区二区三区| 久久无码一区二区三区少妇| 色综合久久最新中文字幕| 久久成人国产精品二三区| 久久66热人妻偷产精品9| 77777亚洲午夜久久多喷| 尹人香蕉久久99天天拍| 亚洲精品成人网久久久久久| 亚洲精品无码久久久| 久久午夜免费视频| 亚洲精品无码成人片久久| 久久久SS麻豆欧美国产日韩|