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

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

          2018-5-30    seo達(dá)人

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


          目前做的項(xiàng)目是ionic3和angular4.0的結(jié)合,所以用到了很多關(guān)于ionic3中封裝好的標(biāo)簽,例如具有輪播效果的ion-slides和ion-slide等。那么這次就要總結(jié)一下另外一個(gè)標(biāo)簽ion-segment的用法了。 
          ion-segment這個(gè)標(biāo)簽以前用的很少,幾乎沒(méi)有用過(guò)。它主要是一組按鈕,有時(shí)稱(chēng)為分段控件,之前都是用button按鈕,現(xiàn)在知道了,開(kāi)始用ion-segment,因?yàn)樗凶詭У臉邮剑@樣就可節(jié)省很多時(shí)間,同時(shí)呢允許用戶(hù)與許多控件的緊湊組進(jìn)行交互。 分段提供與標(biāo)簽相似的功能,選擇一個(gè)將取消選擇所有其他選項(xiàng)。 當(dāng)您希望讓用戶(hù)在應(yīng)用程序的不同頁(yè)面之間來(lái)回移動(dòng)時(shí),應(yīng)使用選項(xiàng)卡欄而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。 
          下面來(lái)看一段代碼:

          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"> 可以綁定一個(gè)事件(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"> 蘋(píng)果 </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
          蘋(píng)果顯示,如果要默認(rèn)顯示一個(gè)就把默認(rèn)的那個(gè)設(shè)置一個(gè)初始值比如要默認(rèn)顯示蘋(píng)果就把蘋(píng)果的value值設(shè)置成change也就是說(shuō),在定義change變量的時(shí)候,需要把哪個(gè)設(shè)置為默認(rèn)顯示就把哪個(gè)的value值賦值給change作為初始值 public change=”pie”;


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

          日歷

          鏈接

          個(gè)人資料

          存檔

          99久久精品国产一区二区| 亚洲精品乱码久久久久久久久久久久| 亚洲精品久久久www| 中文字幕无码av激情不卡久久| 久久亚洲国产中v天仙www | 一本色道久久88综合日韩精品 | 久久精品水蜜桃av综合天堂| 亚洲精品国产美女久久久| 国产精品99久久精品| 久久人人爽人人爽人人片AV麻豆| 国内高清久久久久久| 久久99精品国产麻豆蜜芽| 久久亚洲精品中文字幕| 91麻豆国产精品91久久久| 无码精品久久久久久人妻中字 | 色偷偷88欧美精品久久久| 国产精品久久久久a影院| 热99RE久久精品这里都是精品免费| 日日狠狠久久偷偷色综合免费| 婷婷综合久久中文字幕蜜桃三电影 | 久久久久亚洲av成人网人人软件| 亚洲国产欧美国产综合久久| 日日狠狠久久偷偷色综合0| 国产ww久久久久久久久久| 青草影院天堂男人久久| 日韩亚洲国产综合久久久| 99久久夜色精品国产网站| 性色欲网站人妻丰满中文久久不卡| 国产福利电影一区二区三区久久老子无码午夜伦不 | 亚洲午夜久久久影院| 亚洲欧洲精品成人久久曰影片| 久久久久久久91精品免费观看| 亚洲精品乱码久久久久久蜜桃不卡 | www性久久久com| 久久久无码精品亚洲日韩京东传媒 | 97精品国产97久久久久久免费 | 久久久久久av无码免费看大片| 亚洲欧美另类日本久久国产真实乱对白 | 国产成人综合久久精品红| 亚洲色大成网站WWW久久九九| 久久国产乱子伦精品免费午夜|