イオン2（水平）のスクロール可能セグメント

Question

イオン2のセグメントを使用して水平スクロールを実行しようとしています。ここでは、コードは次のとおりです。

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> 

this文書によると、私はイオンセグメント外のイオンスクロールを使用するので、私はこのようなUIを取得しています。

どのように私は名前の長さに応じて、私の名前が見えるようにのみ3〜4名を表示することができます。ユーザーがスクロールすると、次の名前が1つずつ表示されます。

Answer 1

このソリューションはIonic2のためなので、解決策は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; 
    } 
} 

このあなたはフレックスから切り替える必要があり、様々な幅をブロックしたい場合は、幅のタブを固定したい場合は/インラインのためだけに働いていましたここで

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

を-blockスラジュによって溶液中で述べたように、様々な幅タブ

するためのものです検索githubのディスカッションのリンク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; 
    } 
} 

は細かい

の作品