In this post i will show you how you can place Ionic tabs navigation at the bottom or at the top for your ionic framework apps with version 1.x . If you are looking for information on How to Place Ionic 2 tabs at the bottom or top check out my other post as things work differently in Ionic 2.
The default layout for Ionic tabs navigation is as following:
For IOS – Bottom
For Android – Top
So there are may reasons that you want to move the tabs navigation form the top to bottom or vice versa one of them is that you want your apps to look consistent on both IOS and android.
Here is how you can achieve this
We will need to create a new project you can do this in your existing project. We will need to use the tabs template for obvious reasons.
ionic start TabsTopBottom tabs
In side the app.js file we will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘top’); to it like so
// 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
// setup an abstract state for the tabs directive
// if none of the above states are matched, use this as the fallback
It’s kind of obvious form the code $ionicConfigProvider.tabs.position(‘top’); sets the tabs at the top and $ionicConfigProvider.tabs.position(‘bottom’); will set them at the bottom for both the plataforms