CODEWITHSUNDEEP
cordovaonsen-ui
tvirelli
tvirelli

Reputation: 464

How can I use both tabbar and navigator on onsen ui

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"

enter image description here

Upvotes: 0

Views: 3330

Answers (2)

Andi Pavllo
Andi Pavllo

Reputation: 2506

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!

Upvotes: 1

John Gonzalez
John Gonzalez

Reputation: 315

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>

Upvotes: 0

Related Questions