segment button indicator

[steavengong]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

When I use IonSegementButton,I want to set the indicator style in segment button , I found something I hope not given
in style class segement-button-indicator, I want to set the top、left、right and bottom by myself

How can i do this by myself?

Ionic:

Ionic CLI : 6.2.1
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.14.1
npm : 6.13.7
OS : macOS Catalina

[liamdebeasi]

Thanks for the issue. Can you describe your use case a bit more? We do not recommend altering the positioning of the indicator as that will interfere with the segment animations/interactivity.

[steavengong]

this is my page code:

<ion-content>
  <div>segment button indicator style in ios mode</div>
  <ion-segment value="shared">
    <ion-segment-button value="bookmarks">
      <ion-label>Bookmarks</ion-label>
    </ion-segment-button>
    <ion-segment-button value="reading">
      <ion-label>Reading List</ion-label>
    </ion-segment-button>
    <ion-segment-button value="shared">
      <ion-label>Shared Links</ion-label>
    </ion-segment-button>
  </ion-segment>
</ion-content>

style code

ion-segment {
  --background: red;

  & ion-segment-button {
    --background: green;
    --background-checked: yellow;
    --color: lightblue;
    --color-checked: black;

    //indicator setting :
    //in ios mode   if i set the indicator height ,it will be on top
    //how can i change it on bottom
    --indicator-height: 10px;
    --indicator-color: blue;
  }
}

ionic info:
Ionic:

Ionic CLI : 6.2.1
Ionic Framework : @ionic/angular 5.0.5
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.2.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.14.1
npm : 6.13.7
OS : macOS Catalina

[liamdebeasi]

Thanks for the follow up. You can use the --indicator-transform CSS variable. Does this work for your use case?

Here is an example: https://codepen.io/liamdebeasi/pen/wvajyBR

[steavengong]

Thanks

another question:
the ion-label with css custom Properties —color not work

in Docs

Here is an example: https://codepen.io/steavengong/pen/oNXdJqz

[steavengong]

Thanks! another question: the ion-label with css custom Properties —color not work https://codepen.io/steavengong/pen/oNXdJqz <https://codepen.io/steavengong/pen/oNXdJqz>

…

2020年3月16日 21:45，Liam DeBeasi ***@***.***> 写道： Thanks for the follow up. You can use the --indicator-transform CSS variable. Does this work for your use case? Here is an example: https://codepen.io/liamdebeasi/pen/wvajyBR <https://codepen.io/liamdebeasi/pen/wvajyBR> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#20757 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACS34DFD55AEV4NIBBQI7DLRHYUQBANCNFSM4LGJFYHA>.

[liamdebeasi]

Glad the issue is resolved!

Regarding ion-label, can you create a separate issue? Thanks!