Toolbar segment buttons don't change color when pressed?

Ionic Framework ionic-v3
1

I use a toolbar at the bottom of my screen for navigation, and it works quite well. Since I’m lazily loading pages there can be a small delay after the button press before the pushed page appears (I believe that the page is loading during this delay). Therefore, it would be helpful to show the user that their tap() did occur.

Button elements change color when pressed down, but ion-segment-button don’t seem to visually indicate that they have been pressed/tapped.

Is there any easy way to make the segment button change color when pressed like a normal button?

<ion-footer>
<ion-toolbar>
    <ion-segment [(ngModel)]="icons">
      <ion-segment-button clear icon-left value="previous" (tap)="gotopreviouspage()">
      <ion-icon name="arrow-back"></ion-icon>
      </ion-segment-button>
     
      <ion-segment-button clear icon-only value="menu" class="menu-button" (tap)="gototable()">
        <ion-icon name="menu"></ion-icon>
      </ion-segment-button>

      <ion-segment-button clear icon-right value="next" (tap)="gotonextpage()">
      <ion-icon name="arrow-forward"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-footer>
2

After reading documentation I realized I was using the wrong components for my navbar and have since switched to an ion-grid with buttons

1 Like