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

tabs ionic
Italo Maia picture Italo Maia · Jan 10, 2015 · Viewed 63.1k times · Source

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>

Answer

jrl53 picture jrl53 · Jan 13, 2015

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

Related questions

Ionic tabs Badge

I am trying to add a badge on my Icons in the tabs. The current result is: http://play.ionic.io/app/decfc14cb171 Does anyone know how to put them in the top-right corner of each icon? I tried …

Read More
Open link in new tab or window

Is it possible to open an a href link in a new tab instead of the same tab? <a href="http://your_url_here.html">Link</a>

Read More
How to insert spaces/tabs in text using HTML/CSS

Possible ways: <pre> ... </pre> or style="white-space:pre" Anything else?

Read More