How to show tabs on menu pages?


#1

I have a requirement where i want to display tabs on menu pages.
I was able to display tabs in other child pages using tabsHideOnSubPages: false but i could not find anything that can display tabs in menu pages.
Is there any solution?


#2

What do you mean by menu pages? Just tabs on a page you’ve visited through the menu, or tabs inside the sidemenu?


#4

Yeah, i want the tabs on the pages visited through menu.


#5

Any solution for this problem sir?


#6

Basically, tabs are meant for a whole navigation at the bottom of the screen (shown all the time), but inside a page you can hide the tabs yes through a mix of @viewchild component and in local tab code, either [hidden] of *ngIf code.

Also, if you use a side menu as tabs, I would suggest you SplitPane (ionic new UI component), as it manages it better and more natively than old fashion tabs (with a sliding horizontal menu, with an inside menu).

Demo screenshot here: http://blog.ionic.io/ionic-2-2-0-is-out/


#7

If you need more inside a tab, you can use like I do, a segment combined with *ngSwitch, that split the page in 2. But it’s quite heavy in resources, as it uses the main code for both “segments” of page, even if only one part of the tab/page is loaded.


#8

I don’t think you understood what i am trying to achieve here.
When you click on any menu, it navigates to that page from app.component.ts file’s openPage function.
And problem is that menu page doesn’t have tabs which i want to display.

So how to set or display those tabs in menu pages?


#9

Yes sorry, can you provide a screenshot or some bits of code with your question please, as “menu” can mean a lot of differents things?


#10

Sure.
Let’s say i have a app containing tabs.

and app also contains side menu.

Now when i click My apps then i am redirecting it to MyAppsPage and after redirecting that page doesn’t show tabs as homepage from the first pic.

I hope you understood it.


#11

Ok thanks, I understand better now.
Just one minute ago, I adviced someone to check the official sidemenu template.

The trick is you use both tabs and sidemenu, so it is not obvious to debug. I see a couple of possible options / problems to solve:

  1. When you go back to MyAppsPage, with a navcontroller(push or pop) it looses focus, and maybe you need to push the data using NavParameters, so that your MyAppsPage take the default value of tabs & side menu (like with a const or let variable). That is, if your home page is bound to something, like RootPäge value.

  2. The global observable way, that will focus on RootPage event, and make sure it has a value at any time. Hence, listening for changes in that value at all times, with a subscribe thing.

Hope it helps,


#12

I couldn’t understand your first option.
Can you please elaborate it sir?
And also is that possible with what you’re suggesting?
Thanks. :slight_smile:


#13

@amitk04 Well I also use tabs in my app, so I assume you are using a RootPage definition somewhere, or as a starting point for your navigation.
I assumed that, maybe your code loose the value of it, when you click inside your side menu. But it’s assumption based only. I’m merely guessing without seeing your code.


#14

I don’t understand why this combination of side menus and tabs is so popular. As a user, I would find it a massively confusing UX.

That being said, instead of navigating directly to MyAppsPage, you can navigate to whatever the tab-containing page is, and use NavParams to convey the proper number to bind to its selectedIndex property so that the My Apps tab is enabled. If there is no My Apps tab, then you really need to rethink the design, because what is the user supposed to make of the tabs at that point?