이오닉 세그먼트 버튼 아이콘 및 텍스트

Question

저는 이온이 많아 버튼과 아이콘 위에 세그먼트가있는 버튼을 만들려고하는데 문제가 있습니다.

<ion-segment-button value="Home"> 
    <div> 
    <ion-icon name="home"></ion-icon> 
    <label>Home</label> 
    </div> 
</ion-segment-button> 

Answer 1

좋은 자습서는 여기에서 찾을 발견 : https://www.youtube.com/watch?v=mlwVsr0_iO8

home.html을

<ion-header > 
    <ion-navbar> 
     <ion-title> 
      SwipedTabs 
     </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content > 

    <ion-segment class="SwipedTabs-tabs" > 
     <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)" 
     [ngClass]='{ "SwipedTabs-activeTab" : (this.SwipedTabsSlider && (this.SwipedTabsSlider.getActiveIndex() === i || ( tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' > 
      {{tab}} 
     </ion-segment-button> 
    </ion-segment> 

    <!-- here is our dynamic line "indicator"--> 
    <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.%': (100/this.tabs.length)}"></div> 

    <ion-slides #SwipedTabsSlider (ionSlideDrag)="animateIndicator($event)" 
          (ionSlideWillChange)="updateIndicatorPosition()" 
          (ionSlideDidChange)="updateIndicatorPosition()" 
          (pan)="updateIndicatorPosition()" 
          [pager]="false" 
       > 
     <ion-slide> 
     <h1>Page 1 </h1> 
     </ion-slide> 
     <ion-slide> 
      <h1>Page 2 </h1> 

</ion-slide> 
</ion-slides> 

home.ts

import { Component ,ViewChild} from '@angular/core'; 
import { NavController ,Slides} from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
@ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides ; 

    SwipedTabsIndicator :any= null; 
    tabs:any=[]; 


    constructor(public navCtrl: NavController) { 
    this.tabs=["page1","page2"]; 
    } 
    ionViewDidEnter() { 
    this.SwipedTabsIndicator = document.getElementById("indicator"); 
    } 

    selectTab(index) { 
    this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(100*index)+'%,0,0)'; 
    this.SwipedTabsSlider.slideTo(index, 500); 
    } 

    updateIndicatorPosition() { 
     // this condition is to avoid passing to incorrect index 
    if(this.SwipedTabsSlider.length()> this.SwipedTabsSlider.getActiveIndex()) 
    { 
     this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(this.SwipedTabsSlider.getActiveIndex() * 100)+'%,0,0)'; 
    } 

    } 

    animateIndicator($event) { 
    if(this.SwipedTabsIndicator) 
     this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + (($event.progress* (this.SwipedTabsSlider.length()-1))*100) + '%,0,0)'; 
    } 
}