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

        • 項目總結(jié)關(guān)于ionic3中的ion-segment的總結(jié)

          2018-5-30    seo達人

          如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


          目前做的項目是ionic3和angular4.0的結(jié)合,所以用到了很多關(guān)于ionic3中封裝好的標(biāo)簽,例如具有輪播效果的ion-slides和ion-slide等。那么這次就要總結(jié)一下另外一個標(biāo)簽ion-segment的用法了。 
          ion-segment這個標(biāo)簽以前用的很少,幾乎沒有用過。它主要是一組按鈕,有時稱為分段控件,之前都是用button按鈕,現(xiàn)在知道了,開始用ion-segment,因為它有自帶的樣式,這樣就可節(jié)省很多時間,同時呢允許用戶與許多控件的緊湊組進行交互。 分段提供與標(biāo)簽相似的功能,選擇一個將取消選擇所有其他選項。 當(dāng)您希望讓用戶在應(yīng)用程序的不同頁面之間來回移動時,應(yīng)使用選項卡欄而不是分段控件。 您可以使用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 在內(nèi)容里面使用

          <ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)"> <ion-segment-button value="friends"> Segment 在內(nèi)容里面使用 </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"> 表單內(nèi)使用 </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
          蘋果顯示,如果要默認顯示一個就把默認的那個設(shè)置一個初始值比如要默認顯示蘋果就把蘋果的value值設(shè)置成change也就是說,在定義change變量的時候,需要把哪個設(shè)置為默認顯示就把哪個的value值賦值給change作為初始值 public change=”pie”;


          藍藍設(shè)計m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://m.sdgs6788.com

          存檔

          久久亚洲中文字幕精品有坂深雪| 青草国产精品久久久久久| 国色天香久久久久久久小说| 精品久久久久久久中文字幕 | 亚洲国产精品久久66| 亚洲AV日韩AV永久无码久久| 尹人香蕉久久99天天拍| 久久精品视频一| 国色天香久久久久久久小说| 久久只有这精品99| 久久天天躁夜夜躁狠狠躁2022| 国产精品99久久久精品无码| 久久久久久午夜精品| 久久久久久精品免费免费自慰| 久久久久波多野结衣高潮| 狠狠色丁香久久婷婷综合_中| 久久乐国产综合亚洲精品| 久久久久久久精品妇女99| 久久精品欧美日韩精品| 成人资源影音先锋久久资源网| 久久久久久免费一区二区三区 | 久久亚洲天堂| 一本久久综合亚洲鲁鲁五月天| 久久精品极品盛宴观看| 国产偷久久久精品专区| 国产99久久精品一区二区| 精品无码久久久久久久动漫| 欧美亚洲国产精品久久久久| 99久久er这里只有精品18| 亚洲精品第一综合99久久| 婷婷五月深深久久精品| 国产巨作麻豆欧美亚洲综合久久 | 久久精品青青草原伊人| 欧美日韩中文字幕久久伊人| 久久国产香蕉一区精品| 久久久久亚洲av无码专区导航| 伊人色综合久久| 精品国产99久久久久久麻豆| 亚洲国产精品久久久久久| 久久久无码精品亚洲日韩蜜臀浪潮 | 人人狠狠综合久久亚洲高清|