CODEWITHSUNDEEP
tabsionic-framework
Italo Maia
Italo Maia

Reputation: 1956

How to place ionic tabs at the bottom of the screen?

I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>

Upvotes: 97

Views: 64944

Answers (9)

Mohamed Imran
Mohamed Imran

Reputation: 179

Try This

<ion-footer><ion-tabs> <ion-tab tabTitle="Return"></ion-tab> </ion-tabs></ion-footer>

Upvotes: 0

Sandip Moradiya
Sandip Moradiya

Reputation: 726

In side the app.js file you will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘bottom’)

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

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.
.
.
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

Upvotes: 5

Duannx
Duannx

Reputation: 8726

Update for Ionic 2, and Ionic 3+:

You have 2 methods to change tab bar position:

Method 1: Use tabsPlacement propertive of <ion-tabs>

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

Method 2: Change config in app.module.ts 

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement : 'bottom'
    })
  ]
})

See the docs

Upvotes: 2

Greg Blass
Greg Blass

Reputation: 3650

Update for Ionic 2 (cleaner/improved syntax):

In app.js:

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

See Configs

Upvotes: 9

MasterProgrammer200
MasterProgrammer200

Reputation: 1021

How to place ionic tabs at the bottom of the screen in Ionic 2

For the current version ionic 2.0.0-beta.10.

In app.ts:

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

See Config

For the soon to be released ionic 2.0.0-beta.11

In app.ts:

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

Config

Upvotes: 3

jrl53
jrl53

Reputation: 1861

Since the beta 14 of Ionic (http://blog.ionic.io/the-final-beta/), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on. In the case of tabs, for iOS the default is to display on bottom, and Android on top.

You can easily "hard set" the location for all platforms by setting the tabs.position function in the $ionicConfigProvider, inside your config function like this:

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

You can check documentation here

Upvotes: 175

Nasouh Almrstani
Nasouh Almrstani

Reputation: 73

myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);

Upvotes: 2

Raj Kumar
Raj Kumar

Reputation: 983

Placing it in your app.js does the work.

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom.

For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.

Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS

Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs

Upvotes: 7

AhmedBinNasser
AhmedBinNasser

Reputation: 2732

To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Hope this will help.

Upvotes: 65

Related Questions