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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

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

 
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