How to set a "Primary" background on Segment

Ionic Framework ionic-v3
1

Hi everyone,

I was tweaking the ionic-conference-app a little bit and for the schedule page I wanted to set the top Segment to have a Primary background like the example in the doc.
image

The change the text and underline color only.

A way, I can set that please?

Thank you!

2

Can you show your code, so we can see what you might have done differently.

3

Hi @S.G,

Below is my ion-header.

You can see the color=“primary” on the ion-segment, but that just change the text and border-bottom color.
How do I set the background color instead like the example in the doc?

I was thinking about twaeking the .scss to “force” that. But if there is a better way, that will be more clean. :slight_smile:

Thanks!

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Programme</ion-title>
  </ion-navbar>

  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="primary">
      <ion-segment-button value="all">
        Tout
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favoris
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

  <ion-toolbar no-border-top>
    <ion-searchbar color="primary"
                   [(ngModel)]="queryText"
                   (ionInput)="updateSchedule()"
                   placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>
4

Ok I see, all you have to do is move color="primary" to the toolbar like this…
<ion-toolbar no-border-top color="primary">

But the button text will also be primary and not visible, so just add a color to them like this…
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="light">

4 Likes
5

Awesome!

Thanks a bunch @S.G, it works like a charm now. :slight_smile:

image