LeRoy LeRoy - 4 months ago 53
HTML Question

Ionic2 round segment-button

does anyone know how to change the css of a segment- button from square to round ?

enter image description here

I tried using normal css but it gets wierd when ionic2 tries to transform the button on

segment-activated
Here is a Plunker example

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


With normal css I failed. and it gets weird when you select another button
enter image description here

Answer

Found a hack to do it. NB this is a hack and the style is not intend for this.

Css solution: place this in your .scss file

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