February 16, 2016

Ionic place tabs at the bottom of the screen

Ionic place tabs at the bottom of the screen : In ionic framework we some time face problem in the position of the tabs. In this tutorial we are going to explain how to place the tabs at the bottom of screen in ionic framework.

Ionic place tabs at the bottom of the screen

Suppose we have tabs something like in this example –

Ionic tabs at the bottom of the screen example:

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
     <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
     Tab 1
     </ion-tab>

     <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
      Tab 2
     </ion-tab>

     <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
      Tab 3
     </ion-tab>
    </ion-tabs>
</ion-footer-bar>

To place the above tabs at the bottom of the screen add the following code in app.js just after the angular.module.

Place Ionic tabs at the bottom of the screen:

 angular.module('myApp', ['ionic'])

.config(function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom');

})

Try it »

If you will run the above demo it will produce the output like this -

Ionic place tabs at the bottom of the screen:

Ionic place tabs at the bottom of the screen