イオン2でスワイプ可能なセグメントタブを作成するには？

Question

さらに多くのタブを追加したいのですが、これらのタブをスワイプする方法はありますか？

<ion-segment [(ngModel)]="query" (ionChange)="showdata()"> 
<ion-segment-button value="slide1"> 
TabTitle1 
</ion-segment-button> 
<ion-segment-button value="slide2"> 
TabTitle2 
</ion-segment-button> 
<ion-segment-button value="slide3"> 
TabTitle3 
</ion-segment-button> 
</ion-segment> 

Answer 1

これは参考のために

を動作しますが、CSSの下に追加します - https://github.com/driftyco/ionic/issues/7202

home { 
.swiper-slide { 
overflow-y: scroll; 
display: block; 
} 

ion-segment { 
    display: block; 
    white-space: nowrap; 
    font-size: 0; 
    overflow: auto; 

    &::-webkit-scrollbar { 
     width: 0; 
     height: 0; 
     display: none; 
    } 

    ion-segment-button.segment-button { 
     display: inline-block; 
     min-width: 100px; 
     width: auto; 
    } 
} 
/* 
ion-segment-button.segment-button { 
    display: inline-block!important; 
    min-width: 100px!important; 
    width: auto!important; 
    }*/ 

} 

Answer 2

ion-scrollを試してみてください。

<ion-scroll scrollX=true> 
<ion-segment [(ngModel)]="query" (ionChange)="showdata()"> 
<ion-segment-button value="slide1"> 
TabTitle1 
</ion-segment-button> 
<ion-segment-button value="slide2"> 
TabTitle2 
</ion-segment-button> 
<ion-segment-button value="slide3"> 
TabTitle3 
</ion-segment-button> 
</ion-segment> 
</ion-scroll>