In my previous article, we discussed OnsenUI page anatomy and what it takes to build a multi-page application. Usually, this is not enough, mobile applications require more than a bunch of simple pages. Because of that it’s important to consider UI patterns before start implementation. Onsen UI currently supports four commonly used UI patterns.
 
 

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

 
UI patterns are complex page structures covering one or more pages at the same time. They are usually used to provide a better page usability. Don’t mistake them for page patterns.
 
OnsenUI provides these UI patterns:
 
  1. Navigation pattern
  2. Sliding menu pattern
  3. Tab bar pattern
  4. Split view pattern
 

Navigation pattern

 
Navigation pattern is the most commonly used pattern if you want to have a parent-child relationship between pages, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails. I already showed you one implementation in the second tutorial. Without it framework can’t display more than one page, handle page navigation or remember navigation history. You can use it to link to a child page from a button or a list item.
 
Demo
 
Embeded working example:
 
OnsenUI Navigation pattern
 
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" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-navigator title="Navigator" var="myNavigator">
    <ons-page>

	    <ons-toolbar>
        <div class="center">Toolbars</div>
        <div class="right">
          <ons-toolbar-button>
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
          </ons-toolbar-button>
        </div>
      </ons-toolbar>

      <ons-list>
        <ons-list-header>Toolbar divider</ons-list-header>
        <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
          Page 1
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
          Page 2
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-navigator>

  <ons-template id="page1.html">
    <ons-page>
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Page 1</div>
        <div class="right" style="line-height: 44px">
          Right
        </div>
      </ons-toolbar>

      <div style="text-align: center">
        <br />
        <ons-button modifier="light" onclick="myNavigator.popPage()">
          Slide back
        </ons-button>
      </div>
    </ons-page>
  </ons-template>
          
  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
	      <div class="left"><ons-back-button>Back</ons-back-button></div>
	      <div class="center">Page 2</div>
	      <div class="right" style="padding-right: 6px"><input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;"></div>
      </ons-toolbar>

      <div style="text-align: center">
        <br />
        <ons-button modifier="light" onclick="myNavigator.popPage()">
          Slide back
        </ons-button>
      </div>
    </ons-page>
  </ons-template>

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

  });
});
 

Sliding menu pattern

 
Sliding menu pattern is also referred to as a Menu pattern. It is useful if your application needs to have many pages at the same level. directive is used for this pattern, swipe support is included.
 
Demo
 
Embeded working example:
 
OnsenUI Sliding menu pattern
 
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" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

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

  <ons-template id="first.html">
    <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">First Page</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Content goes here.</p>
    </ons-page>
  </ons-template>


  <ons-template id="second.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="menu.toggleMenu()">
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Second Page</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Content goes here.</p>
    </ons-page>
  </ons-template>

  <ons-template id="menu.html">
    <ons-list>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('first.html', {closeMenu: true})">
        First Page
      </ons-list-item>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('second.html', {closeMenu: true})">
        Second page
      </ons-list-item>
    </ons-list>
  </ons-template>

</body>

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

  });
});
 
Continue Reading