Tabs: programmatically remove the highlight after a push

Ionic Framework ionic-v3
1

Hello,
In a page I have some tabs with Icons, one tab contains link to other pages.
I want to click and change page without leave the tabs, it’s pretty easy by using a normal nav.push()
The problem is that I think it is misleading for the user if the tab remains highlighted.
I want to remove this wrong indication from the last visited tab.

I made some test with the methods in the prototype, I access them in the common way:
@ViewChild(‘mainBottomTabs’) mainBottomTabs: Tabs;

For compatibility reasons, I’d avoid to access directly the dom element.

The css code the selects the tab is this one:
.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
color: #eb478b;
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}

Any idea?

2

Ok, I was working on it for awhile, but I’ve just found the solution on my own :slight_smile:
this.navCtrl.parent._tabs[0].isSelected=false;
Thank you anyway

3

I have a problem with two things in the previous post:

  • properties beginning with leading underscores are private and should not be accessed from outside
  • the NavController's parent property should be avoided as it leads to unreadable spaghetti

I would rethink the UI so that either the tabs accurately reflect the current state of affairs, or they are not visible at all.

1 Like