My previous article covered Ionic Framework 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 pattern with Side menu pattern, one of them (Tab) can only work as a child of the other one (Side 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

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin Tutorials

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. Side menu + Tab combination
  2. Side menu + Master Detail combination
  3. Two Side menus combination
  4. Side menu + Tab bar + Master Detail combination
 

Side menu + Tab combination

 
When working with Ionic Framework 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 a side menu directive.
 
One part of a directive, namely ion-side-menu-content, points to content section, including automatic back navigation and inner navigation (all thanks to routing set in app.js file). Second directive part, namely ion-side-menu points to left menu content.
 
Content section, in our case contains Tab component, which again thanks to routing points to inner tab pages.
 
Demo
 
Embeded working example:
 
Ionic Side menu + Tab combination
 
HTML
 
<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
		<title>Ionic Framework Example</title>
		<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
		<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
		<script src="app.js"></script>
	</head>

	<body>

    <ion-side-menus>
      
      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-positive nav-title-slide-ios7">
          <ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item href="#/" menu-close>Home</ion-item>
            <ion-item href="#/about" menu-close>About</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
      
    </ion-side-menus>
    
    <script id="tabs.html" type="text/ng-template">
      <ion-view title="Home">

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons> 
        

        <ion-tabs class="tabs-icon-top tabs-positive">

          <ion-tab title="Home" icon="ion-home" href="#/tab/home">
            <ion-nav-view name="home-tab"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Settings" icon="ion-gear-a" href="#/tab/settings" >
            <ion-nav-view name="settings-tab"></ion-nav-view>
          </ion-tab>

          <ion-tab title="Sign-Out" icon="ion-log-out">
          </ion-tab>

        </ion-tabs>
      </ion-view>
    </script>
    
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons>        
        <ion-content padding="true">
          <h1 style="text-align: center;">Home Page</h1>
        </ion-content>
      </ion-view>
    </script>    
    
    <script id="settings.html" type="text/ng-template">
      <ion-view title="About">
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons>         
        <ion-content padding="true">
          <h1 style="text-align: center;">Settings  Page</h1>
        </ion-content>
      </ion-view>
    </script>    
    
    <script id="about.html" type="text/ng-template">
      <ion-view title="About">
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons>        
        <ion-content padding="true">
          <h1 style="text-align: center;">About Page</h1>
        </ion-content>
      </ion-view>
    </script>        

	</body>
</html>
 
JavaScript
 
var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tabs', {
      url: '/tab',
      controller: 'TabsCtrl',
      templateUrl: 'tabs.html'
    })
    .state('tabs.home', {
      url: '/home',
      views: {
        'home-tab': {
          templateUrl: 'home.html',
          controller: 'HomeTabCtrl'
        }
      }
    })  
    .state('tabs.settings', {
      url: '/settings',
      views: {
        'settings-tab': {
          templateUrl: 'settings.html'
        }
      }
    })    
    .state('about', {
      url: '/about',
      controller: 'AboutCtrl',
      templateUrl: 'about.html'
    });

  $urlRouterProvider.otherwise('/tab');
});

app.controller('TabsCtrl', function($scope, $ionicSideMenuDelegate) {
  
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }
  
});

app.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {

});

app.controller('AboutCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }
});
 

Side menu + Master Detail combination

 
This example, like a previous one, starts with side menu directive.
 
One part of a directive, namely ion-side-menu-content, points to content section, including automatic back navigation and inner navigation (all thanks to routing set in app.js file). Second directive part, namely ion-side-menu points to left menu content.
 
Content section, in our case contains Master Detail component, which again thanks to routing points to inner detail pages.
 
Demo
 
Embeded working example:
 
Ionic Side menu + Master Detail combination
 
HTML
 
<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
		<title>Ionic Framework Example</title>
		<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
		<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
		<script src="app.js"></script>
	</head>

	<body>

    <ion-side-menus>
      
      <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-balanced nav-title-slide-ios7">
          <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i> Back
          </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-pane>

      <ion-side-menu side="left">
        <ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item href="#/" menu-close>Home</ion-item>
            <ion-item href="#/settings" menu-close>Settings</ion-item>
          </ion-list>
        </ion-content>
      </ion-side-menu>
      
    </ion-side-menus>
    
    <script id="home.html" type="text/ng-template">
      <ion-view title="Home">
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons>          
        <ion-content has-header="true">
            <ion-item href="#/second">Second Page</ion-item>
            <ion-item href="#/third">Third Page</ion-item>
        </ion-content>      
      </ion-view>
    </script>
    
    <script id="second.html" type="text/ng-template">
      <ion-view title="Second Page">
        <ion-content has-header="true" padding="true">
          <a class="button icon-left ion-home" href="#/">Go back!</a>
        </ion-content>
      </ion-view>
    </script>
    
    <script id="third.html" type="text/ng-template">
      <ion-view  title="Third Page">
        <ion-content has-header="true" padding="true">
          <a class="button icon-left ion-home" href="#/">Go back!</a>
        </ion-content>
      </ion-view>
    </script>  
    
    <script id="settings.html" type="text/ng-template">
      <ion-view title="Settings Page">
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
        </ion-nav-buttons> 
        
        <ion-content padding="true">
          <h1 style="text-align: center;">Settings</h1>
        </ion-content>
      </ion-view>
    </script>    

	</body>
</html>
 
JavaScript
 
var app = angular.module('myApp', ['ionic']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      controller: 'HomeCtrl',
      templateUrl: 'home.html'
    })
    .state('settings', {
      url: '/settings',
      controller: 'SettingsCtrl',      
      templateUrl: 'settings.html'
    })
    .state('second', {
      url: '/second',
      templateUrl: 'second.html'
    })
    .state('third', {
      url: '/third',
      templateUrl: 'third.html'
    });   
  $urlRouterProvider.otherwise('/');
});

app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };
});

app.controller('SettingsCtrl', function($scope, $ionicHistory, $ionicSideMenuDelegate) {
  $scope.myGoBack = function() {
     $ionicHistory.goBack()
  };
  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  };  
});
 
Continue Reading