How to create more than 3 working tabs in the seed template bottom nav


#1

I downloaded the “ionic-angular-cordova-seed-master” and tried to alter it.

I wanted to see if I could have 5 tabs in the bottom nav <ion-tab>. I renamed the “adopt” tab to “tabtwo” and the “about” tab to “tabthree” in the template/tabs.html and changed their icons as well, and I created new templates for the renamed tabs in the template folder: tabtwo.html and tabthree.html. I altered app.js to reflect the name changes.

I didn’t mess with the pets tab, (the first tab) or its content since it has a pet detail sub tab that involves ui-router in a way I don’t understand yet.

So anyway, that all worked fine. I then tried to add more tabs:

I added the additional <ion-tab>s in tabs.html. Call them “tabfour” and "tabfive"
with new ionic icons. I created template pages for them, and copied and added <ion-tab> and <ion-nav-view> code like the second and third tabs had, renaming as appropriate. So that worked and it looks great. So the first three tabs work great: pet, tab two, and tab three. Pet tab saves state if a pet detail has been selected and you navigate away and come back, it is on the right pet detail. Okay, so tab four and five look great but don’t work, since I haven’t updated app.js

So when I update app.js and add

 .state('tab.tabfour', {
      url: "/tabfour",
      views: {
        'tabfour-tab': {
          templateUrl: 'templates/tabfour.html',
          
        }
      }
    })

to app.js, copying from the working third tab, the app train wrecks, since now when it loads, it is blank.

Clearly, there is something about this use of ui-router or ion-tab that I don’t understand. Does the added code need a controller? (grasping at straws) the pet has one, but the adopt and about didn’t.

Any help on this question or pointing me to a version of the seed that works with five tabs would be great. I did find something on code pen that someone posted with ionic with 5 tabs, but it didn’t work, and had repeated tabs (not unique tabs pointing to unique templates) so that doesn’t help me.


#2

What does your tabs.html look like?


#3

Thanks. This is the tabs.html currently–there have been many versions as I tried various ways to make it work, and have called the tabs various different names at times.

<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">


  <!-- Inbox Tab -->
  <ion-tab title="Inbox" icon="ion-ios7-filing-outline" href="#/tab/pets">
    <ion-nav-view name="pets-tab"></ion-nav-view>
  </ion-tab>


  <!-- Stream Tab -->
  <ion-tab title="Stream" icon="ion-ios7-download-outline" href="#/tab/stream">
    <ion-nav-view name="stream-tab"></ion-nav-view>
  </ion-tab>


  <!-- Profile Tab -->
  <ion-tab title="Profile" icon="ion-person-add" href="#/tab/profile">
    <ion-nav-view name="profile-tab"></ion-nav-view>
  </ion-tab>
  
    <!-- My Page Tab -->
  <ion-tab title="My Page" icon="ion-ios7-person-outline" href="#/tab/mypage">
    <ion-nav-view name="mypage-tab"></ion-nav-view>
  </ion-tab>


  <!-- Send Tab -->
  <ion-tab title="Send" icon="ion-ios7-upload-outline" href="#/tab/send">
    <ion-nav-view name="send-tab"></ion-nav-view>
  </ion-tab>


</ion-tabs>

#4

As long as the view names are the same and the template can be accessed at the given location there shouldn’t be a problem. Is the title of the new tabs showing? If it is then the problem is within your views.


#5

Here’s a demo adding an extra tab:


#6

Thank you @mquadrat for your replies. The titles show for when I alter the tabs, up to three tabs, if I add more into app.js then no new page views show anywhere. When I add more tabs into tab.html template they do show up in the app. So will investigate what you suggested, I think it is something with the ui-router that I don’t understand yet.


#7

Thank you @Calendee for this, it looks great and I will check it out and try to understand what is happening.


#8

Thank you so much for your help. I was able to take what you did and have been working with it and it is great.

I have reached the point where I want to add a “Side Menu” that slides out, and for that have the hamburger button on the Right side of the nav bar header, (so it doesn’t congest the left back arrow in the nav header). I have investigated about five other implementations of the side menu button on the top nav bar, and it looks like everyone has a different implementation.

I read about your responses about disabling drag and about the freezing issue, and the offsite article you recommended to read.

What do recommend as a best practice if I am starting with the More than 3 Tabs code pen ( http://codepen.io/calendee/pen/FexbH ) you created? I don’t want to kill the history state that works in that. Can I integrate what you did at http://plnkr.co/edit/WZFRfSfV2zVt1igpC3jY?p=preview or are they just incompatible?


#9

I’m not sure what you mean by “starting with More than 3 Tabs”. You can have 3 or 4 or 5 tabs although the do get space constrained on small devices.


#10

@calendee “More than 3 Tabs” is the name you gave the codepen you wrote, which is at: http://codepen.io/calendee/pen/FexbH . You wrote that to show how to create more than three tabs, since I tried to do that with the seed template and it wasn’t working.

I used what you wrote, (More than 3 Tabs) to create a five tab layout. I want to add a Side Menu to that layout by adding a hamburger icon on the top header nav, on the right side. I looked around and saw how people have implemented the Side Menu and it looks like everyone has done it differently, with the code to implement as side menu in the top nav being generated or coded differently.

For example sometimes the sub pages are inline, or separate html, or page fragments that get passed in by ui-router state machine, some time using href, other times ui-sref, one side menu by georgi has the side menu labels being created and returned by a service.

I want to continue using what you created, using the navigation paradigm in that, to add a top right button for a side menu. So my question is can I or should I use the method you showed in http://plnkr.co/edit/WZFRfSfV2zVt1igpC3jY?p=preview to implement the side menu in the top nav (changing the code to be on the right side) or is the way you do the side menu there incompatible with the More than 3 Tabs template you created?

I am too noobie right now to know if that is possible or stupid. Or is there another technique to implement the side menu onto the right side of the header nav of the More than 3 Tabs template you created that is a more “best practices” way to do it?