How can I use both tabbar and navigator on onsen ui

Question

I am trying to use Onsen UI with cordova to create an iOS app that has the same nagication layout os the Facebook app. Where as there is a tabbar at the bottom and the 5th tab is a "more" button that then opens a list view page that has more links to more pages.

I can get it to work using tabbar with var="nav" and then on the list view doing nav.loadPage('otherpage.html') and this works. However, it doesn't give that "sexy" effect of sliding to the page. It's just there.

I tried following this question here: #29829148 which has you implement both a tabbar and a navigator but when I put a navigator inside my tabs it messed up the look of the tabbar and when I click on the list view the page slid in, but it was in the very bottom right side of the device, so in other words it didn't work.

Can someone advice how to do this?

For refernce, here is an image that shows both the main Facebook app with tabbar and what it looks like when you click the last tab "more"

Andi Pavllo · Answer 1 · 2016-01-08T02:01:46.493

What you are asking is very easy to implement, just create the ons-tabbar element and set animation='slide'. If you want to use the ons-navigator too, just add it inside one of the ons-page inside the tabbar element.

Here is a working CodePen example.

And here is the code:

<ons-tabbar animation="slide">
  <ons-tabbar-item icon="home" label="Page1" active="true" page="page1.html" persistent></ons-tabbar-item>

  <ons-tabbar-item icon="gear" label="Page2" page="page2.html"></ons-tabbar-item>

  <ons-tabbar-item icon="star" label="Page3" page="page3.html"></ons-tabbar-item>
</ons-tabbar>

<ons-template id="page1.html">
  <ons-navigator var="myNavigator">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <div style="text-align: center">
      <h1>Page 1</h1>
      <ons-button ng-click="myNavigator.pushPage('new_page.html', { title: 'New Page' })">Push New Page</ons-button>
    </div>
  </ons-navigator>
</ons-template>

<ons-template id="page2.html">
  <div style="text-align: center">
    <h1>Page 2</h1>
  </div>
</ons-template>

<ons-template id="page3.html">
  <div style="text-align: center">
    <h1>Page 3</h1>
  </div>
</ons-template> 

<ons-template id="new_page.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">New Page</div>
    </ons-toolbar>

    <div style="text-align: center">
      <h1>New Page</h1>

      <ons-button ng-click="myNavigator.popPage();">
        Pop Page
      </ons-button>
    </div>
  </ons-page>
</ons-template>

Hope it helps!

score 0 · Answer 2 · answered Jan 07 '16 at 21:15

I think this is what your talking about. Here is one of my pages in my app. My IOS one is pending but here is the google play one. Just go to menu > connect and it should be similar to what you are trying to do.

    <!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Living Word</title>  

  <!-- All our CSS -->
   <link rel="stylesheet" href="lib/onsen/css/onsenui.css">    
  <link rel="stylesheet" href="css/onsen-css-components.css"> 
  <link rel="stylesheet" href="css/plugins.css"/>
  <link rel="stylesheet" href="css/roots.css"/>
  <link rel="stylesheet" href="css/app.css"/>

  <!-- These are our JS libraries that make all the magic in our App -->
  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    
  <script src="js/plugins.js"></script>  
  <script src="cordova.js"></script>
  <script src="js/app.js"></script>  

</head>



<ons-tabbar>
  <ons-tab page="adults.html" icon="ion-person" label="Adults" active="true"></ons-tab>
  <ons-tab page="teens.html" icon="ion-man" label="Teens"></ons-tab>
  <ons-tab page="kids.html" icon="fa fa-child" label="Kids"></ons-tab>
</ons-tabbar>

and in the individual pages such as adults.html (which let me emphasize that I the them in seperate individual files because I wanted to use the ons-carousel too. My other child pages looked like this.

<ons-modal var="modal">
<ons-icon icon="fa fa-hand-o-up"></ons-icon>
  <br><br>
  You can click on any tab...<br> <br>
  <img style="width:50%;" id="image" src="images/chalk.png"><br>
  Or slide the tab over to <br>preview the coordinator.<br><br>
  <ons-button id="show-modal" onclick="modal.hide()">Got It!</ons-button><br><br>
  Also, don't forget to explore the age groups!<br>
  <ons-icon icon="fa fa-chevron-down"></ons-icon>
</ons-modal>
<ons-navigator title="Navigator" var="myNavigator">

<ons-page>
  <ons-toolbar> 
    <div class="left">
      <a class="button--menu2" href="index.html"><ons-icon icon="fa fa-chevron-circle-left" fixed-width="false"></ons-icon> Home</a>
    </div>

.....and the end of the page.......................

      <ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('Adults/womens.html', {animation : 'slide' })">
      <ons-carousel swipeable overscrollable auto-scroll style="height: 50px; width: 100%; align: center;" initial-index="1" swipe-target-width="100">
        <ons-carousel-item class="button--menu">
          <strong>Nancy Martinez & Kris Driscoll</strong> 
        </ons-carousel-item>
         <ons-carousel-item class="button--menu">
        Women's Ministry
        </ons-carousel-item>
        </ons-carousel>
        </ons-list-item>
      <br />

    </ons-list>


  </div>

</ons-page>

</ons-navigator>

Are your .html pages actual separate files? I as, because I am using for mine and not actually different files. — tvirelli, Jan 07 '16 at 21:20
first block of text is its own file. and the last to blocks are two parts of another seperate one. This is just to ensure that the navigator is being contained so it does not interfere with my carousel. This was just an immediate work around that I used to combine them. I would also check the app to make sure its exactly what your looking for before implementing. — John Gonzalez, Jan 07 '16 at 22:33
also note that I called all the source in the first page. I actually used an href to get to that page so it would need to the sources to be called. I did that intentionally to start the navigator within the child pages. — John Gonzalez, Jan 07 '16 at 22:43

How can I use both tabbar and navigator on onsen ui

2 Answers2