html - Ionic2 圆形分段按钮

Question

有人知道如何将分段按钮的 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

找到了一个 hack 来做到这一点。 注意这是一个黑客行为，并且样式不是为此目的。

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