OnsenUI | Mixing UI patterns

Written by on April 9, 2015

OnsenUI | Mixing UI patterns

Sliding menu + Tab bar + Navigation

I won’t talk much about this combination. You will understand it perfectly well if you’ve read previous combinatins.

Demo

Embeded working example:
OnsenUI Sliding menu + Tab bar + Navigation

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" animation="fade">
        <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-navigator var="myNav">
      <ons-page>
        <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>      
        <h2 style="text-align:center">Sliding Menu + Tab bar Demo + Navigation<br/>Page 1</h2>
        <ons-list>
          <ons-list-item ng-click="myNav.pushPage('item1.html')">
            List item 1
          </ons-list-item>
          <ons-list-item ng-click="myNav.pushPage('item2.html')">
            List item 2
          </ons-list-item>
        </ons-list>      
      </ons-page>
    </ons-navigator>    
  </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>    

  <ons-template id="item1.html">
    <ons-page>
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title</div>
      </ons-toolbar>
    </ons-page>
  </ons-template>
  
  <ons-template id="item2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Title2</div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

</body>

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

  });
});

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

1 thought on “OnsenUI | Mixing UI patterns”

Leave a Reply