Sticking ion-tabs to bottom


#1

Hey fellas!

I’m creating an application with a menu based on ion-tabs that are always visible.

I’m trying to get the ion-tabs to stick to the bottom of every view in my application. When placed inside the ion-content section the ion-tabs break when my content is longer than the device screen, then they will stay put as I scroll down. When placed inside the footer-bar my ion-tabs are always on top, but then I need to href content from the ion-tabs into separate ion-views which forces me to reload ion-tabs for every view.

Which is the correct way to do this?

<!-- Example with ion-tabs inside ion-content  -->
<ion-content>
    <ion-tabs class="tabs-positive tabs-icon-only">

        <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
        <!-- SCROLLABLE TAB 1 CONTENT -->
        </ion-tab>

        <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
        <!-- SCROLLABLE TAB 2 CONTENT -->
        </ion-tab>

        <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
        <!-- SCROLLABLE TAB 2 CONTENT -->
        </ion-tab>

      </ion-tabs>
</ion-content>

<!-- Example with ion-tabs inside ion-footer-bar  -->    
<ion-footer-bar>
    <ion-tabs class="tabs-positive tabs-icon-only">

        <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" href="{{ LINK TO TAB 1 CONTENT }}">
        </ion-tab>

        <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" href="{{ LINK TO TAB 2 CONTENT }}">
        </ion-tab>

        <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" href="{{ LINK TO TAB 3 CONTENT }}">
        </ion-tab>

      </ion-tabs>
</ion-footer-bar>

#2

Solved it! The magic abstract: true state in app.js.