Best way to add a ion-view to ion-tabs without having a tab

ionic-v1
1

I’m looking for a way to add a normal view to a page where I have an ion-tabs controller.
The idea is when you first open the view with the ion tabs, you see a view that has no tab in the bottom nav bar.
It should also change title of the header bar. I also have to navigate back to this view.
I’m quite new to all of this so I don’t know how (and if) I can achieve it because in the example code on the website the individual tabs and views are nested so I don’t know how I can target the right ui-view in my states.

1 Like
2

How do something like this look for you?

3 Likes
3

Thanks for the effort but it’s not what I’m looking for. The first page (that says the non-tab view) should be displayed with the tabbar already visible.

1 Like
4

Maybe it’s best if I make my own by using a regular tabs components.
The added advantage might be that in that case I’ll be able to use only 1 view instead of defining a view for each tab.
Is there a reason why this is set up to use multiple views instead of loading into 1?
I’m guessing it’s needed to keep the state of one particular tab while switching between tabs? Anyway this won’t be an issue in my use case since it should always go back to the original start view of one tab.

5

Well the reason for using multiple ion-nav-views is so each tab can have it’s own navigation stack independent from one another.

I’m working on something to apply ngIf to the tabs div, <div class="tabs"></div>, and remove them from the view while on a particular page. Just trying to find out how to apply it the the right div.

6

Thanks for further looking into this, it would be nice to have views in the tabcontroller that don’t have a tab to represent them. But I realise it might defeat the point of having the tabcontroller.

For now I solved it by creating an abstract view with an ion-nav-view and a simple tabs div. This way I can show pages without linking them to a tab. The only drawback here is that you don’t have persistent history for each tab but I didn’t need it anyway. Also I need to write the selected tab feature myself but again not really an issue.

Control.html (abstract)

<ion-nav-view name="tab-content"></ion-nav-view>
<div class="tabs tabs-icon-top">
    <a class="tab-item" ui-sref="control.settings">
        <i class="icon ion-gear"></i>
        Settings
    </a>
... other tabs
</div>

And in my app config:

.state('control.home', {
                url: "/home",
                views: {
                    'tab-content': { // No tab here
                        templateUrl: "app/views/control/Home.html",
                        controller: 'HomeCtrl'
                    }
                }
            })
            .state('control.settings', { // This one has a tab
                url: "/settings",
                views: {
                    'tab-content': {
                        templateUrl: "app/views/control/Settings.html",
                        controller: 'SettingsCtrl'
                    }
                }
            })
7

FYI : You can hide a tab with the hidden attribute :

UPDATE : Here is a sample of hiding or showing the tab at will:

@mhartington : The hidden attribute doesn’t seem to be in the docs. UPDATE : I just opened https://github.com/driftyco/ionic-site/issues/215

2 Likes
8

Neat, good find.
I might use that then because in my solution I run into some layout issues, footers e.g not positioned correctly and the scrolling of the view pane is also a bit off.

9

Nice! Didn’t even know that was in there!

10

I am looking for a way to have multiple pages under one tab.

What i want to do is use the tabs as sections, different things the app does.

Locations | People | Things

So for the tab I call Locations I have a list of locations.
I want to click a location and go to location details, but keep it under the Locations tab.

Is there any way to do this?

I was hoping it could be something like a state tab.locations then the location details could be tab.locations.details

There is a codepen example of what I want to do, but it doesn’t seem to work with the ionic tabs or at least I can’t figure out the proper way to do it.

11

Hello,

How can i load existing tab on non tab pages in the Ionic Creator?

Thanks

12

I am very new to ionic,I want to do the same thing as you did in this example,it might sound akward but I want to know where do we code the html and js code .Do we do we do it inside the tabs.html file inside the tabs folder?
I am very much confused.Please help me in this.
Thanks