[Ionic5] - ion-segment-button-indicator width (Shadow Dom)

Ionic Framework
1

Hey there,
I found a lot Shadow-DOM Stories already and really like the feature. But also ran into some trouble when I try to customize some stylings that are not yet part of the ionic offered variables.

Long story short. I want to do the following:

  • change the ions-segment-button-indicator width to about 10%, or 20%.

There is now the feature of the css-var: --indicator-height which is great, i already use that.

So, now is the thing… I can manipulate that Shadow-DOM via JS? I red about that, but all I see is that I have to do a custom-element (class) that extends ion-segment? And then go on? Sounds really much work for me.

So is there an easy option? I know that I can request something like --indicator-width but not sure when and where. :smiley:

I am happy about any help. :wink:

Thank you in advance

Pascal

2

use the shadow part:

ion-segment-button::part(indicator){
width: 36px;
margin: auto;
}

2 Likes