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>