scrollbare Segmente in ionic 2 (horizontal)

Question

Ich versuche horizontale Scroll mit Segmenten in ionic2 zu tun. Hier ist der Code:

home.ts:

<ion-scroll scrollX="true" style="width:100vw;height:350px" > 
<ion-segment [(ngModel)]="relationship" color="primary"> 


     <ion-segment-button value="friends" (ionSelect)="selectedFriends()"> 
     Friends 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 
     <ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> 
     Enemies 
     </ion-segment-button> 

    </ion-segment> 
     </ion-scroll> 

Nach this Dokument, ich verwendet, um die Ionen blättern außerhalb des Ionen Segment, so erhalte ich die Benutzeroberfläche so.

Wie kann ich meinen Namen sichtbar zu machen von der Länge des Namens abhängig und zeigen nur 3 bis 4 Namen. Nachdem der Benutzer geblättert hat, sollte er nacheinander die nächsten Namen anzeigen.

Answer 1

ist diese Lösung für Ionic2, so dass die Lösung funktioniert nur für Ionic2

ion-segment { 
    justify-content: space-between; 
    overflow: auto; 

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

    ion-segment-button.segment-button { 
     flex: 1 0 100px; 
    } 
} 

ist, wenn Sie Breite Laschen befestigt werden sollen, wenn Sie verschiedene Breite wünschen Sie sich von flex wechseln sollten/Inline-Block -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; 
    } 
} 

hier für verschiedene Breite tabs ist

wie in der Lösung von SurajerwähntFund Github Diskussion Link here

Answer 2

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; 
    } 
} 

funktioniert