<ion-view title="Tab Bar">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-pane>
<ion-tabs class="secondarytab" tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
1
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
2
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
3
</ion-tab>
</ion-tabs>
</ion-pane>
</ion-view>
controller('TabbarCtrl',function($scope, $stateParams, $ionicTabsDelegate) {
var param = $stateParams.cat;
if (param) {
$scope.$on('$viewContentLoaded', function(){
$ionicTabsDelegate.select(parseInt(param));
});
}
})
Never select any tab and not works viewContentLoaded too. With beta 13 I could do it.
Please put together a codepen of this
Works good! with the new version is (required ion nav view, ion-view, ion-content):
<ion-tabs tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-nav-view>
<ion-view>
<ion-content padding="true">
1
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<ion-nav-view>
<ion-view>
<ion-content padding="true">
2
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
<ion-nav-view>
<ion-view>
<ion-content padding="true">
3
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tab>
</ion-tabs>
You can even go a remove the nav-views and just use ion-view. It will end up rendering an equivalent div.
1 Like
pjusto
6
@mhartington the transition animation was lost between tabs
When changing tabs, there shouldn’t be any transitions, similar to how native acts
2 Likes
Oh my god ! Thank you so much for that.
I’m in the middle of an update from beta.13 to 1.0.0 … Been trying for two hours to make those tabs work !