Ionic Framework | Mixing Different UI patterns

Written by on April 9, 2015

Ionic Framework | Mixing Different UI patterns

Two Side menus combination

Again everything 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 the left and right menu content. Basically, this example is almost identical to simple Side menu example except this one has two ion-side-menu components where each one is pointing to a different menu content.

Content section is whatever you want it to be.

Demo

Embeded working example:
Ionic Two Side menus 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>
	  
    <div ng-controller="MainCtrl">       
      <ion-nav-view></ion-nav-view>
    </div>
    
    <script id="menu.html" type="text/ng-template">
      
      <ion-side-menus>
        
        <ion-side-menu-content>
          
          <ion-nav-bar class="bar-positive" >
          
            <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>            
            
            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
              </button>
            </ion-nav-buttons>
            
            <ion-nav-buttons side="right">
              <button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()">
              </button>
            </ion-nav-buttons>            
            
          </ion-nav-bar>
 
          <ion-nav-view animation="no-animation" name="menuContent"></ion-nav-view>
          
        </ion-side-menu-content> 
        
        <ion-side-menu side="left">
          
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          
          <ion-content>
            <ul class="list">
              <a href="#/home/main" class="item" menu-close>Home</a>
              <a href="#/home/first" class="item" menu-close>First Page</a>
              <a href="#/home/second" class="item" menu-close>Second Page</a>
            </ul>
          </ion-content>
          
        </ion-side-menu>

        <ion-side-menu side="right">
          
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Right Menu</h1>
          </ion-header-bar>
          
          <ion-content>
           Some content
          </ion-content>
          
        </ion-side-menu>
        
      </ion-side-menus>
      
    </script>
    
    <script id="main.html" type="text/ng-template">
      <ion-view title="Welcome">
        <ion-content padding="true">
          <p>Swipe to the right to reveal the left menu.</p>
          <p>(On desktop click and drag from left to right)</p>
        </ion-content>
      </ion-view>
    </script>
    
    <script id="first.html" type="text/ng-template">
      <ion-view title="First Page" left-buttons="leftButtons">
        <ion-content has-header="true" padding="true">
          <h1 style="text-align: center;">Content</h1>
        </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">
          <h1 style="text-align: center;">Content</h1>
        </ion-content>
      </ion-view>
    </script>      

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

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('menu', {
      url: "/home",
      abstract: true,
      templateUrl: "menu.html"
    })
    .state('menu.main', {
      url: "/main",
      views: {
        'menuContent' :{
          templateUrl: "main.html"
        }
      }
    })
    .state('menu.first', {
      url: "/first",
      views: {
        'menuContent' :{
          templateUrl: "first.html"
        }
      }
    })
    .state('menu.second', {
      url: "/second",
      views: {
        'menuContent' :{
          templateUrl: "second.html"
        }
      }
    });    
  
  $urlRouterProvider.otherwise("/home/main");
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {

  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  
  $scope.toggleRight = function() {
    $ionicSideMenuDelegate.toggleRight();
  };  
  
});

Side menu + Tab bar + Master Detail

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

Demo

Embeded working example:
Ionic Side menu + Tab bar + Master Detail

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>
		<script src="controllers.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="#/" ng-click="sideMenuController.toggleLeft()">Home</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-tabs class="tabs-positive">
          <ion-tab title="Stooges">
            <h4>The Stooges</h4>
            <ion-list>
                <ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
            </ion-list>
          </ion-tab>
          <ion-tab title="Tab 2">
            <h2>Just another tab, for another reason</h2>
          </ion-tab>
        </ion-tabs>
      </ion-view>
    </script>

    <script id="item.html" type="text/ng-template">
      <ion-view title="{{item}}">
        <ion-content>
          <h1>{{item}}</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('item', {
      url: '/:item',
      controller: 'ItemCtrl',
      templateUrl: 'item.html'
    });

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

app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
  $scope.stooges = [{name: 'First List element'}, {name: 'Second List element'}, {name: 'Third List element'}];

  $scope.openMenu = function () {
    $ionicSideMenuDelegate.toggleLeft();
  }
  
});

app.controller('ItemCtrl', function ($scope, $stateParams) {
  $scope.item = $stateParams.item;
});

Slide Box plus Tab Bar

I will not write a chapter about this combination because Nic Raboy already wrote an excellent article here called Using Slide Boxes and Tabs in Ionic Framework Apps..

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

40 thoughts on “Ionic Framework | Mixing Different UI patterns”

  1. Great article, this saved me some headaches while trying to figure out how to combine menus with tabs and so on.

  2. Hi. I actually need help. In the [SIDE MENU + TAB BAR + MASTER DETAIL] if I add more items to the list, it doesn’t scroll. Can you please help me with this as I am working with same mix of ui patterns and I am stuck with this problem.

  3. Hi Dragan! I just completed your Side Menu + Master Detail tutorial. I’m now trying to pull data from a Cloudant database into my Ionic app. I want to have a list of species display on the master page (or home.html in your example) – when the user clicks on a species, it will take them to the detail page (second.html in your example). Could you point me to one of your tutorials or another tutorial that could help me understand how to do this?

  4. Hi guys! I just implemented twosidemenusplustabs pattern but faced very strange issue. When accessing left side menu it opens mixed with the right side. Looks like they are everlapping…

  5. Hi Dragan,

    Great article, helped me with the two side menus. I need to add one notification and cart icon before the right side menu icon. How can I achieve this ?

    • My advice, ask this question at the official Ionic forum. Also don’t forget to provide a working example and specific instructions what you want to achieve. This way someone will certainly create you a working example.

  6. Hi There, you made an excellent work. I just tried side menu + tab bar + master detail combination and I’m not being able to scroll my app.
    my home.html looks like:
    <ion-view

  7. By default, your page will not auto scroll if you add more content than available page height. But you can go around that, just use this method each time you add a new line:

    $ionicScrollDelegate.scrollBottom(false);

    Use true if you want to animate it.

    Here’s a working example: http://plnkr.co/edit/VkkgWSgA7An3r0wpN11b?p=preview

    And let me thank you, you’re actually one of a few people who cared enough to post a working example.

    • Thx a lot. Now I know that I have to use $ionicScrollDelegate.scrollBottom(false);

      But the problem is still there (((
      Every time I try to biuld a local test sample or plnkr one it works, but as soon as I return to my app-in-progress it fails to scroll (((
      It can scroll using tap on phone or mouse on laptop but doest scroll when I add new msgs programmatically (((

      Tied of this issue… spent more than a week to resolve it…

  8. These are great – thanks so much for taking the time to show how to mix patterns like this. Any chance you could do the same for OnsenUI? Regardless – super helpful, and love all your tutorials. Keep up the good work!

  9. Incredible! These work out of the box, with the nightlies. The first sidemenu+tabs that actually works.
    Thank you so much.

  10. I have problems with the sidemenu+tabs. Taking exactly what you posted, it works in Plunker, it works in Ripple (from inside Visual Studio), but it doesn’t work on an actual Android device (Nexus 7). All I get on the Nexus is “Home” and “About” written on the top left corner of the screen. Any thoughts? Thanks.

  11. Great work on the article. i implemented the first (side menu + tab combination) and it worked except for when i click menu items, i don’t get redirected to the page.

  12. i tried separating the ion-side-menus to a different file so i would just have the ion-nav-view in the index page but my app just shows a white blank page when debugging. how can i achieve that pls

Leave a Reply