Ionic-framework: 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

[jianbo]

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.

[MrFragStealer]

hi, @elineopsommer did you figure it out?
I'm also interested how to do this in Ionic 2.

For now I used some css to achieve this:

tab-t0-0 {

display:none;
}
//this will hide tab 0 button

[kyr0]

@MrFragStealer Your solution works, but isn't very dynamic or programmatically controllable. I think, this Directive is cleaner:

TabHiddenDirective

[harshasanjeeva]

@MrFragStealer thanks it works

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.