Ionic2圆段按钮

Question

没有人知道如何从方形改变segment-按钮的CSS圆？

我试图用正常css但当ionic2试图改造上segment-activated按钮下面是一个例子Plunker

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

与正常的CSS我失败了它变得怪异。当您选择另一个按钮

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