<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 項目總結關于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”;


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

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 国产精品国产亚洲精品看不卡| 日本精品久久久中文字幕 | 69久久夜色精品国产69| 免费人欧美日韩在线精品| 精品三级在线观看| 国精无码欧精品亚洲一区| 亚洲精品无码日韩国产不卡?V| 亚洲午夜精品一区二区| 凹凸国产熟女精品视频app| 日韩一区精品视频一区二区| 欧美日韩国产精品| 国产精品 91 第一页| 久久777国产线看观看精品| 久久66热人妻偷产精品9| 最新亚洲精品国自产在线观看| 久久久久人妻精品一区| 永久无码精品三区在线4| 久久久精品国产亚洲成人满18免费网站 | 国产91精品黄网在线观看| 2020国产精品永久在线| 精品久久8x国产免费观看| 亚洲国产成人一区二区精品区| 精品国产亚洲男女在线线电影| 97视频在线精品国自产拍| 久久精品国产久精国产| 九九精品成人免费国产片| 国内精品久久久久久野外| 国产精品人成在线播放新网站 | 日产精品久久久久久久性色| 亚洲欧美日韩国产成人精品影院| 久久久久人妻一区精品果冻| 精品久久久久一区二区三区| 精品视频一区二区三区| 久久国产成人亚洲精品影院| 国内精品久久久久久久coent| 国产免费伦精品一区二区三区| 国产成人久久久精品二区三区| 99久久亚洲综合精品成人| 国产成人毛片亚洲精品| 精品国产黑色丝袜高跟鞋| 久久夜色精品国产亚洲av|