Hidden tab attribute for ion-tab elements

[ducdigital]

This will help people able to implement both side-menu and ion-tabs at once.

In the file: ** js / angular / directive / tab.js **

Change:

tabsCtrl.$tabsElement.append($compile(tabNavElement)($scope));

to

if ($attr.hidden !== 'true') { tabsCtrl.$tabsElement.append($compile(tabNavElement)($scope)); }

This allow a hidden="true" attribute in the ion-tab element. It will hide the button but view/controller will continue to works as normal. We can access it by route or other mean like a normal tab.

I hope we can implement this if there are no problem :)

[perrygovier]

Hey @ducdigital, what would the use case be for a hidden tab item? I used them before in a personal project, but later found it was unnecessary. Hiding tab elements feels like a bandaid solution to something Ionic should do better in the first place, or the app's routes could be organized differently.

[calendee]

See also : Issue #1163

This is a pretty common request. For example, I want the GUI to ALWAYS show the tab bar. However, I have a view that I don't want accessible via the tab bar. Within the GUI, I want to be able to show that view.

A hidden tab allows me to :

• Always show the tab bar
• Hide content from the user
• Display that content when I want to & keep the tab bar visible at all times

The alternative of a different state outside the "tab." means a navigation event happens, taking the user away from the tabs, and now, they have to use a back button to get back inside of just tapping a tab.

A few other examples of people requesting this:

• http://forum.ionicframework.com/t/tabs-additional-view/5818
• http://forum.ionicframework.com/t/hidden-tabs/1679
• many others, I just didn't dig them up.

[calendee]

Just found another request : Issue #1673

[calendee]

Thanks Ionic team. Here's a sample CodePen for anyone stumbling across this

http://codepen.io/calendee/pen/HvlAu

[Set2005]

Saved my hair :)

[jason-engage]

Does anyone know how to properly hide and show tab items? Like a method to toggle them individually?

I found it : http://codepen.io/anon/pen/DqyeI?editors=101

Btw, the mix of Github's issue centre and the Ionicframework's forum can be kind of confusing to navigate and figure out solutions! I love all the codepens tho!

[JobaDiniz]

It is related if you think about.

My scenario, described here, it a little bit different.

I want all tabs to be visible at all times, but I don't want to link all my states to one particular tab. All my states, except each root tabs states, should be rendered in the current selected tab.

Did I made this up? No... Facebook (iOS) does exactly that. They have a set of fixed tabs and all other "states/views" are rendered in the active tab. - it's genius.

Unfortunately, I wasn't able to hack things around to make this work (tried a few things, like creating views state object on the fly...).

For example
I will not configure app.search state to any tab (using views state config)... app.search does not belong to any tab... it belongs to the current one.
Same for my app.user (/user/{id:int})... state.go('app.user', {id: 3}) should be rendered in the current tab.

[elineopsommer]

Hi,
How is this done in Ionic2? I tried:

<ion-tab [root]="TeamPage" [attr.hidden]="true" tabIcon="settings"></ion-tab>
<ion-tab [root]="TeamPage" [hidden]="true" tabIcon="settings"></ion-tab>

but no luck.