My previous article covered OnsenUI UI patterns, this one will show you how to mix them properly. We are talking about an important topic here, UI patterns can cover one or more pages, but not all of them have a same priority or can be on a same level. For example, if you want to combine Tab bar pattern with Sliding menu pattern, one of them (Tab bar) can only work as a child of the other one (Sliding menu).
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Introduction

 
We will cover four mostly used UI pattern combinations. Leave me a comment below if you want to see some other kind of combination and I’ll add it to this article.
 
UI pattern combinations:
 
  1. Sliding menu + Tab bar combination
  2. Sliding menu + Navigation combination
  3. Two Sliding menu combination
  4. Sliding menu + Tab bar + Navigation combination
 

Sliding menu + Tab bar combination

 
When working with OnsenUI UI patterns you must follow certain rules. First one, Sliding menu always has a top ordering priority, you will see it, in this case.
 
If you take a look at provided example (below) you will see that we’re starting with Sliding menu directive. One part of a directive will point to our menu (menu.html) while the other one will point to the Tab bar directive (tabs.html). Tab bar then displays application initial active page (page1.html).
 
Sliding menu list gives you an opportunity to get back to the Tab bar (Home) or two other separate pages (Settings and About). Notice one more thing, menu list doesn’t have links pointing to Tab bar pages (I told you we need to follow certain rules).
 
For example, let’s say that our menu list has an element that points to page2.html (which is a part of the Tab bar hierarchy). If we click it page will transition to page2.html but the Tab bar will not be visible. This is because we didn’t follow a proper page hierarchy, basically if we jump from a menu list to specific Tab bar page we would skip Tab bar initialization altogether. page2.html is part of the Tab bar, but it’s also a basic page and we can access it any time.
 
Demo
 
Embeded working example:
 
OnsenUI Sliding menu + Tab bar combination
 
HTML
 
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-sliding-menu main-page="tabs.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu"></ons-sliding-menu>

  <ons-template id="tabs.html">
    <ons-page>
      <ons-tabbar position="bottom" var="tabbar">
        <ons-tabbar-item label="Page1" page="page1.html" icon="ion-home" active="true"></ons-tabbar-item>
        <ons-tabbar-item label="Page2" page="page2.html" icon="ion-chatbox-working"></ons-tabbar-item>
        <ons-tabbar-item label="Page3" page="page3.html" icon="ion-ios-pricetag"></ons-tabbar-item>
        <ons-tabbar-item label="Page4" page="page4.html" icon="ion-ios-cog"></ons-tabbar-item>
      </ons-tabbar>
    </ons-page>
  </ons-template>

  <ons-template id="page1.html">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>
    <ons-page>
      <h1 style="text-align:center">Sliding Menu + Tab bar Demo<br/>Page 1</h1>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <ons-page>
      <h1 style="text-align:center">Sliding Menu + Tab bar Demo<br/>Page 2</h1>
    </ons-page>
  </ons-template>

  <ons-template id="page3.html">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 3</div>
    </ons-toolbar>
    <ons-page>
      <h1 style="text-align:center">Sliding Menu + Tab bar Demo<br/>Page 3</h1>
    </ons-page>
  </ons-template>

  <ons-template id="page4.html">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 4</div>
    </ons-toolbar>
    <ons-page>
      <h1 style="text-align:center">Sliding Menu + Tab bar Demo<br/>Page 4</h1>
    </ons-page>
  </ons-template>

  <ons-template id="menu.html">
    <ons-list>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('tabs.html', {closeMenu: true});">
        Home
      </ons-list-item>      
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('settings.html', {closeMenu: true});">
        Settings
      </ons-list-item>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('about.html', {closeMenu: true})">
        About
      </ons-list-item>
    </ons-list>
  </ons-template>
  
  <ons-template id="settings.html">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Settings</div>
    </ons-toolbar>
    <ons-page>
      <h1 style="text-align:center">Sliding Menu + Tab bar Demo<br/>Settings Page</h1>
    </ons-page>
  </ons-template> 
  
  <ons-template id="about.html">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">About</div>
    </ons-toolbar>
    <ons-page>
      <h1 style="text-align:center">Sliding Menu + Tab bar Demo<br/>About Pag</h1>
    </ons-page>
  </ons-template>    

</body>

</html>
 
JavaScript
 
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});
 
Continue Reading

  • Y

    Thank you very much!! I've been looking for this! Very Helpful!!! 😀