Ionic2ラウンドセグメントボタン

Question

誰もがセグメントボタンのCSSを正方形から円形に変更する方法を知っていますか？

私は、通常のcssを使用してみましたが、ionic2がここsegment-activated上のボタンを変換しようとすると、それは奇妙を取得Plunker例私は失敗した通常のCSSで

<ion-segment [(ngModel)]="date" danger> 
    <ion-segment-button value="1"> 
    1 
    </ion-segment-button> 
    <ion-segment-button value="2"> 
    2 
    </ion-segment-button> 
    <ion-segment-button value="3"> 
    3 
    </ion-segment-button> 
</ion-segment> 

です。別のボタンを選択すると奇妙になる

Answer 1

ハックが見つかりました。 NBこれはハックで、スタイルはこれを意図していません。

CSSのソリューションは：あなたの.scssファイル内の場所にこれを

ion-segment-button{ 
    //max-width: 25px; 
    border-style: solid; 
} 

.segment-button { 
    border-style: none; 
    border-color: #e62100; 
    color: #e62100; 
    border-width: thin; 
} 

.segment-button:first-of-type { 
    border-radius: 90px 90px 90px 90px; 
    // margin-right: 0px; 
    margin-left: 0px; 
    line-height: 3.4rem; 
    height: 100%; 
    width: 100%} 
.segment-button:not(:first-of-type) { 
    border-radius: 90px 90px 90px 90px; 
// margin-right: 0px; 
    margin-left: 20px; 
    line-height: 3.4rem; 
    height: 100%; 
    width: 100%;} 
.segment-button:last-of-type { 
    border-radius: 90px 90px 90px 90px; 
    margin-right: 0px; 
    margin-left: 20px; 
    line-height: 3.4rem; 
    height: 100%; 
    width: 100%;} 


.segment-activated{ 
    background-color: #e62100; 
    color: #ffffff; 
}