Hidden Tabs

ionic-v1
1

I have an app with more feature screens than we wish to show on the tab bar. These features can be accessed through a sliding menu. See this codepen for an example: the last menu item has no target tab and obscures the tab buttons.

http://codepen.io/anon/pen/hHicE

What I would like is for the ‘feature’ view to behave as if it belonged to hidden tab, i.e. when the ‘feature’ view is displayed:

  • the tab buttons remain visible.
  • the tab buttons are all deselected.

How should I do this?

2

This is a rough idea : http://codepen.io/calendee/pen/oaDhH

It hides the “Feature” tab until it is selected in the menu. Then, it displays that tab. If another path is selected in the menu, it hides the “Feature” tab again.

Not perfect, but perhaps a starting point?

3

Good start-- it got me thinking about adding a hidden=“true” attribute to ion-tab and update ionic to support it. I have the patch running now and it does the trick really nicely. I might polish it up get some test and submit a pull.

4

I have more or less the same issue. @Calendee’s codepen would be nice, except I would like the tab to never show up into the tabs bar, even when it’s selected. If I’m not mistaken, @Seb already achieved this effect, so would you mind sharing how did you achieve this effect, or at least some pointers so I can start investingating somewhere? Thank you!

5

I added the feature to my fork of ionic, but didn’t get around to sending a pull request. In the patch, I added is a ‘hidden’ attribute to the ionic tab directive.

6

Hey all–

I patched beta ionic with this feature.

You can now set hidden="true" on an ion-tab to prevent it from displaying it’s button in the tab bar while remaining a navigable tab. You can either get to it via the controller or a direct navigation, like a side menu. See this codepen for the feature in action.

To get to the ‘about’ tab, you can slide open the menu and select the tab view from there.

It’s useful for my project and I think other may want this feature too. Can I get some feedback before I submit a pull request?

2 Likes
7

I vote for it, would be a nice feature.

8

See this post :

It’s an ugly hack but it could help someone without having to modify the Ionic source.

9

UPDATE : Here’s a Codepen with the newly available hidden=true attribute.

Via : https://github.com/driftyco/ionic/commit/bb6976ad54736103d78be3bddd9faf7719dc0153

10

Glad to see this made it in!

11

Thanks for contributing! I needed this!