Tab / Tab Bar Navigation is another navigation pattern that found it’s full use on smartphones and tablets. This model is used to divide and store a large amount of different categories of information in a single view. Depending on a screen size or mobile platform application can contain up to 5 tab items, and it can be positioned either at top or bottom of the screen. Some platforms provide horizontal tab bar scrollability if number of tab items surpass 5.
Ionic framework tab pattern follow all mentioned rules with few exceptions. Horizontal tab scrollability don’t exist, and you’re not limited to max five tab items. You can use as many tab items as you want.
Table of Contents
[spoiler title=” Click here if you want to see other tutorials, or articles about Ionic themes, templates, plugins …”]
Tutorials
- Series 1 | Installation
- Series 2 | Anathomy of a Page
- Series 3 | UI Patterns
- Series 4 | Mixing UI Patterns
- Series 5 | Master Detail Pattern
- Series 6 | Side Menu Pattern
- Series 7 | Tab Pattern
- Series 8 | Page Navigation
- Series 9 | Passing Data Between Pages
- Series 10 | Form Handling And Validation
- Series 11 | Infinite Scroll
- Series 12 | Pull To Refresh
- Series 13 | Touch Gestures
- Series 14 | Grid System
- Series 15 | Storing data in Ionic Framework
- Series 16 | Using Google Maps With Ionic Framework
- Series 17 | Ionic Framework | Get Page Height & Width
- Series 18 | Understanding Ionic View LifeCycle
- Series 19 | Using Views Events To Create JavaScript Pure Ionic Splash Screen
- Series 20 | Handling Android Back Button Like a Pro
- Series 21 | How to Properly Debug Your Ionic Application
- Series 22 | Creating a Transparent NavBar In Ionic Framework
- Series 23 | What’s the difference between Cordova and Ionic ready state
- Series 24 | Why is The .dot Notation Important in Ionic Framework?
- Series 25 | Programmatically Show Ion List Options Buttons in Ionic Framework
- Series 26 | How to Create Elegant Slider Carousel in Ionic Framework
- Series 27 | Speed Up Your Ionic Application Using These Techniques
Other Resources (themes, templates, plugins, Cordova plugins, starter apps)
- Best Looking Ionic Framework Themes
- Must-have plugins for Ionic Framework
- A Comprehensive List Of Ionic Starter Apps
- Useful Cordova Plugins For Your Ionic Application & Examples
- 15 Great Inspirational UI Theme Designs For Ionic Framework
Cordova Plugin Tutorials
- Changing & Locking Screen Orientation In Ionic Application
- Using Smartphone Camera With Ionic Framework
- Whitelist External Resources and API Calls | Ionic Framework
- Using Cordova Geoloacation API with Google Maps in Ionic Framework
- How to Launch External Application With Ionic Framework
- Using Cordova File Transfer Plugin With Ionic Framework
- How to send an SMS with Ionic Framework and ngCorodva
- How to use Local Notifications with Ionic Framework
- How to Search, Create, and Delete Contacts Using Ionic Framework
- How to Open a File using its default application in Ionic Framework
- How to Show Different Native Modal Windows In Ionic Framework
- Accessing Image Galery using Ionic and ngCordova
- Detecting Device Motion With Ionic Framework and ngCordova
- Handling Native View Animations With Ionic Framework
- Retrieving IP Adress Using Cordova Without External Services
- Using Google AdMob in Your Android Ionic Application
[/spoiler]
Example
Working embede example
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 ng-controller="HomeCtrl"> <ion-nav-bar class="bar-balanced"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-balanced"> <ion-tab title="Search" icon="ion-search" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="Settings" icon="ion-settings" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="Sign Out" icon="ion-power" ui-sref="tabs.contact"> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script> <script id="templates/home.html" type="text/ng-template"> <ion-view view-title="Search a Movie Database"> <ion-content> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="Search" ng-model="selected.movieName" ng-change="searchMovieDB()"> </label> <ion-list> <div class="list"> <a ng-repeat="movie in movies | filter: greaterThan('vote_average') | limitTo:settings.itemsPerPage" href="#/movie/{{movie.id}}" class="item item-thumbnail-left"> <img ng-src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}" onerror="this.src = 'https://www.ginesisnatural.com/images/no_image.jpg';"> <h2><strong>{{movie.original_title}}</strong></h2> <h4>Release Date: <strong>{{movie.release_date}}</strong></h4> <h4>Average score: <strong>{{movie.vote_average}}</strong></h4> </a> </div> </ion-list> </ion-content> </ion-view> </script> <script id="templates/settings.html" type="text/ng-template"> <ion-view view-title="Application Settings"> <ion-content> <div class="list"> <label class="item item-input item-floating-label"> <span class="input-label"><strong>API Key<strong></span> <input type="text" placeholder="API Key" ng-model="settings.apiKey"> </label> <div class="item item-divider"> Items Per Page : {{settings.itemsPerPage}} </div> <div class="item range range-positive"> <i class="icon ion-ios7-sunny-outline">1</i> <input type="range" name="volume" min="1" max="10" value="4" ng-model="settings.itemsPerPage"> <i class="icon ion-ios7-sunny">10</i> </div> <div class="item item-divider"> Minimum Average Score : {{settings.minimumScore}} </div> <div class="item range range-positive"> <i class="icon ion-ios7-sunny-outline">1</i> <input type="range" name="volume" min="1" max="10" value="4" ng-model="settings.minimumScore"> <i class="icon ion-ios7-sunny">10</i> </div> </div> </ion-content> </ion-view> </script> <script id="templates/signout.html" type="text/ng-template"> <ion-view title="Sign Out"> </ion-view> </script> </body> </html>
JavaScript
var app = angular.module('myApp', ['ionic']); app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html" } } }) .state('tabs.about', { url: "/about", views: { 'about-tab': { templateUrl: "templates/settings.html" } } }) .state('tabs.contact', { url: "/contact", views: { 'contact-tab': { templateUrl: "templates/signout.html" } } }); $urlRouterProvider.otherwise("/tab/home"); }); app.factory('Movies', function($http) { var cachedData; function getData(moviename, apiKey,callback) { var url = 'http://api.themoviedb.org/3/', mode = 'search/movie?query=', name = '&query=' + encodeURI(moviename), key = '&api_key=' + apiKey; $http.get(url + mode + key + name).success(function(data) { cachedData = data.results; callback(data.results); }); } return { list: getData, find: function(name, callback) { console.log(name); var movie = cachedData.filter(function(entry) { return entry.id == name; })[0]; callback(movie); } }; }); app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, Movies) { $scope.selected = { movieName : 'Batman' } $scope.settings = { apiKey : '470fd2ec8853e25d2f8d86f685d2270e', itemsPerPage : 5, minimumScore : 5 } $scope.greaterThan = function(fieldName){ return function(item){ return item[fieldName] > $scope.settings.minimumScore; } } $scope.searchMovieDB = function() { Movies.list($scope.selected.movieName, $scope.settings.apiKey , function(movies) { $scope.movies = movies; }); }; $scope.searchMovieDB(); });
Tab pattern overview
Tab pattern is formed using the ion-tabs directive.
<ion-tabs class="tabs-positive tabs-icon-only"> <!-- Tabs will go here --> </ion-tabs>
For iOS, tabs will appear at the bottom of the screen. For Android, tabs will be at the top of the screen, below the nav-bar. This follows each OS’s design specification but can be configured with the $ionicConfigProvider or via additional classes:
<ion-tabs class="tabs-icon-top tabs-positive tabs-top"> <!-- Top Tab --> </ion-tabs>
<ion-tabs class="tabs-icon-top tabs-positive tabs-bottom"> <!-- Bottom Tab --> </ion-tabs>
Directive ion-tabs is not limited with a number of inner tabs though it will not look useful if you use too many of them. Smartphones should no use more than four to five tabs:
<ion-tabs class="tabs-positive tabs-icon-only"> <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> <!-- Tab 1 content --> </ion-tab> <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> <!-- Tab 2 content --> </ion-tab> <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> <!-- Tab 3 content --> </ion-tab> </ion-tabs>
Each tab works as a separate view so it’s advised to use one controller per tab though you can use one controller to cover them all. Article example will use only one because of simplicity, in one of the following articles I will cover multiple controllers.
JavaScript routing with tab views should look like this:
app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html" } } }) .state('tabs.about', { url: "/about", views: { 'about-tab': { templateUrl: "templates/about.html" } } }) .state('tabs.contact', { url: "/contact", views: { 'contact-tab': { templateUrl: "templates/contact.html" } } }); $urlRouterProvider.otherwise("/tab/home"); });
thanks a lot for this article, i have one question
when i use tabs in page and go from non tabs page to tabs page the back button is not appear
how i can back to prevues page?
Hi!
It’s possible to create dynamic tabs? (each with your title and url, of course)
I want to read a JSON from a web server then build the tab navigation…
Can you help me?
Best Regards
Guilherme Zima