In my previous article, we discussed Ionic Framework 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. Ionic Framework 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

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

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.
 
Ionic Framework provides these UI patterns:
 
  1. Master Detail pattern
  2. Side menu pattern
  3. Tab pattern
  4. Split View pattern
 

Master Detail pattern

 
The list 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. You can use it to link to a child page from a button or a list item.
 
Demo
 
Embeded working example:
 
Ionic Master Detail pattern
 
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 animation="slide-left-right"></ion-nav-view>
  </div>
  <script id="home.html" type="text/ng-template">
    <ion-view>
      <ion-header-bar  class="nav-title-slide-ios7 bar-balanced">
          <h1 class="title">Main Page</h1>
      </ion-header-bar>    
      <ion-content has-header="true">
        <ion-list>
          <ion-item>Read only</ion-item>
          <ion-item href="#/second">
            Second Page
          </ion-item>
          <ion-item href="#/third">
            Third Page
          </ion-item>             
        </ion-list>
      </ion-content>
    </ion-view>
  </script>
  <script id="second.html" type="text/ng-template">
    <ion-view>
      <ion-header-bar  class="nav-title-slide-ios7 bar-balanced">
          <h1 class="title">Second Page</h1>
      </ion-header-bar>        
      <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>
      <ion-header-bar  class="nav-title-slide-ios7 bar-balanced">
          <h1 class="title">Third Page</h1>
      </ion-header-bar>        
      <ion-content has-header="true" padding="true">
        <a class="button icon-left ion-home" href="#/">Go back!</a>
      </ion-content>
    </ion-view>
  </script>    
</body>

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

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

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

});
 

Side 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:
 
Ionic Side menu pattern
 
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>

    <div ng-controller="MainCtrl">
      <ion-nav-view animation="slide-left-right"></ion-nav-view>
    </div>

		<script id="menu.html" type="text/ng-template">

			<ion-view title="Page 1">
			
				<ion-side-menus>

					<ion-side-menu-content>
						<ion-header-bar class="nav-title-slide-ios7 bar-balanced">
							<div class="buttons" side="left">
								<button class="button button-icon" ng-click="openLeftSideMenu()">
									<i class="icon ion-navicon"></i>        
								</button>
							</div>						
							<h1 class="title">Dashboard</h1>
						</ion-header-bar>
            <ion-content has-header="true">
							<ion-list>
								<ion-item href="#/second">
                    Second Page
								</ion-item>
								<ion-item href="#/third">
                    Third Page
								</ion-item>
							</ion-list
						</ion-content>
					</ion-side-menu-content>


					<ion-side-menu side="left">
						<ion-header-bar class="bar-dark">
							<h1 class="title">Reports</h1>
						</ion-header-bar>

            <ion-content has-header="true" padding="true">
							<ion-list>
								<ion-item href="#/second">
                    Second Page
								</ion-item>
								<ion-item href="#/third">
                    Third Page
								</ion-item>
							</ion-list>
						</ion-content>
					</ion-side-menu>
				</ion-side-menus>
				
			</ion-view>   		

		</script>   

		<script id="second.html" type="text/ng-template">
			<ion-view>
				<ion-header-bar class="nav-title-slide-ios7 bar-balanced">
					<h1 class="title">Second Page</h1>
				</ion-header-bar>    
        <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>
				<ion-header-bar class="nav-title-slide-ios7 bar-balanced">
					<h1 class="title">Third Page</h1>
				</ion-header-bar>    
        <ion-content has-header="true" padding="true">
          <a class="button icon-left ion-home" href="#/">Go back!</a>
				</ion-content>
			</ion-view>	
		</script>		
		
	</body>
</html>
 
JavaScript
 
angular.module('myApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('menu', {
    url: "/",
    templateUrl: 'menu.html'
  })
  .state('second', {
     url: "/second",
     templateUrl: "second.html"
  })
  .state('third', {
     url: "/third",
     templateUrl: "third.html"
  });  
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/');
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
    $scope.openLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
    }
});
 
Continue Reading

  • adalberto Joco

    Thanks for share. Nice article.

  • ANSHU KUMAR

    I want to add 8 tabs so it needs sliding tab feature(like view pager in android or like whatsapp swipe tab feature. Please tell me if this is possible . If yes then how. Please reply asap.