Change the style of active ion-segment-button change slide in vue js

Ionic Framework Ionic Vue
1

is there any way to design active ion-segment-button ?

        <ion-toolbar>

          <ion-segment :value="tabs" @ionChange="segmentChanged($event)" scrollable>

            <ion-segment-button value="0">

              <font-awesome-icon :icon="['fas', 'file-invoice-dollar']" class="icon_segement" />  

              <ion-label class="label_segement" text-wrap>Historique<br>des loyers</ion-label>

            </ion-segment-button>

            <ion-segment-button value="1">

              <ion-icon :icon="hammer" class="icon_segement" />  

              <ion-label class="label_segement" text-wrap>Historique <br>  des réparations</ion-label>

            </ion-segment-button>

            <ion-segment-button value="2">

              <font-awesome-icon :icon="['fas', 'file-invoice']" class="icon_segement" />

              <ion-label class="label_segement" text-wrap>Historique <br> des factures</ion-label>

            </ion-segment-button>

            <ion-segment-button value="3">

              <font-awesome-icon :icon="['fas', 'house-damage']" class="icon_segement" />  

              <ion-label class="label_segement" text-wrap>Cautionnement</ion-label>

            </ion-segment-button>

          </ion-segment>

        </ion-toolbar>

Sans titre

2

Yes, you can set custom CSS properties. You are looking for “checked segment button” - ion-segment-button | Segment Button Icon and Segment Value

1 Like
3

perfect. thanks alot. this is work for ion-segement-button !!
but how about ion-label and ion-icon ??

4

For icons see here - Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library. To change the color, you set the text color via color.

What do you want to do with the ion-label? The docs are here. You can change the color by either setting the color prop or using CSS --color.

5

i mean when icon-segment_button is activated, ion-label and ion-icon must chage their color.
i have tried this but it doesn’t work

ion-segment-button{

    align-items: center;

    padding: 10px;

     width: 93.75px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
    --background-checked:  #5E4AE7;
}

ion-segment-button ion-label{
      --color-checked: #FCFCFE;
}
6

Does this do what you want? The icon and label should inherit the color from the ion-segment-button.

ion-segment-button {
  --color-checked: #FCFCFE;
}
1 Like