rashidi
February 27, 2020, 4:36am
1
how to change background color in shadow-root in ion-segment-button in shadow-root in ion-segment-button checked in mod ios in ionic 5?
this always white.
I changed property color=“success” but not work.
<ion-segment (ionChange)="segmentChanged($event)" mode="ios" color="success" #daySegment>
<ion-segment-button value="0" mode="ios" color="success">
<ion-label>{{ 'TODAY' | translate }}</ion-label>
</ion-segment-button>
<ion-segment-button value="1" mode="ios" color="success">
<ion-label>{{ 'TOMORROW' | translate }}</ion-label>
</ion-segment-button>
<ion-segment-button value="2" mode="ios" color="success">
<ion-label>{{ 'DAY_AFTER_TOMORROW' | translate }}</ion-label>
</ion-segment-button>
</ion-segment>
As described in the docs :
export class HomePage {
fruits = ["apple", "banana", "cherry"];
eating = "";
}
<ion-segment [(ngModel)]="eating">
<ion-segment-button *ngFor="let fruit of fruits">{{fruit}}</ion-segment-button>
</ion-segment>
ion-segment-button {
--background-checked: var(--ion-color-success);
--color-checked: var(--ion-color-success-contrast);
}
1 Like
Hello, I have the same problem, I used the solution, but the background color is below a white layer that belongs to a #shadow root div, I tried:
div.segment-button-indicator-background {
background: transparent! important;
}
But it does not work.
Might you help me?
Thank you
Hi, this is the solution for the problem i presented:
ion-segment-button{
--indicator-box-shadow: transparent!important;
border-radius: 2.5rem !important;
padding: 0.7rem;
margin: 0;
--background:white;
--color:#2d2e87;
--background-checked: linear-gradient(to right, #2d2e87, #0083CB)!important;
--color-checked: white;
--indicator-color : transparent!important; /* this solution */
}
5 Likes
Hello. None of the solutions are viable when the segment is located in the header/toolbar. Is there any workaround or it is a bug?
Thank you so much. I just changed mode to ios and everything works perfectly
Zahema
February 16, 2021, 7:33am
7
For the record, color="primary"
on ion-segment
seems to be bugged. Remove it and set the color using css.
ion-segment-button {
--background-checked: var(--ion-color-primary);
--color-checked: var(--ion-color-primary-contrast);
--indicator-color: transparent;
}
4 Likes
wekas
April 7, 2021, 11:51pm
8
Wow what a hack. Works though. Sometimes these simple changes are such a challenge.
basti
February 25, 2022, 9:58pm
9
It seems to be still bugged. Your solution thankfully fixes the color, but unfortunately the smooth animation is gone. Do you another solution for that?