feat: ion-segment-button - CSS Custom Properties - --indicator-width

[NeckbreakerPascal]

Feature Request

Ionic version:

[x] *5.0.7

Describe the Feature Request Please add a CSS Custom Property for the width of the ion-segment-button indicator.

Describe Preferred Solution --indicator-width (like --indicator-height)

Describe Alternatives Maybe some other way to do it simple.

Additional Context the --indicator-height was added with ionic5, maybe the width can be added too.

[liamdebeasi]

Thanks for the feature request. Can you please describe your use case? Setting the width on the indicator to anything other than 100% would break with the iOS and MD specs.

iOS	MD

[NeckbreakerPascal]

Hey there, thanks for the quick response.

I like to use the ion-segment in mode md on both systems and the indicator should designwise just be a litte bit smaller (maybe 10%). Like in this draft here:

[liamdebeasi]

Thanks for the follow up. We do not typically add CSS variables that only work on certain modes (this is likely not a desirable behavior on iOS). That being said you should be able to do this with the addition of shadow parts on the segment button. You can follow this issue to track its progress: https://github.com/ionic-team/ionic/issues/20916.

[NeckbreakerPascal]

Thanks, so do I understand you correctly, you want add those shadow parts to the segment button and I need to do that by myself? Or will you add those parts?

The truth is, I did not found a way to add these by myself, therefore I opened this feature request, if that was wrong I am sorry.

[liamdebeasi]

The shadow parts will be added by us. You would target in your CSS by doing something like:

ion-segment-button::part(indicator) {
  width: 50px;
}

Don't be sorry 😄 we have not announced the shadow parts addition yet, but it is coming soon.

[NeckbreakerPascal]

Great thank you a lot! Looks like a good way to do it. :)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.