<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          項目總結關于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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 
          
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合