Is there a way in Ionic framework to have a nested tab bar like this:
I tried it in Codepen, but it doesn't really work:
Example on Codepen
.state('tabs.about', {
url: "/about",
abstract: true,
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.about.page1', {
url: "/page1",
views: {
'about-page1': {
templateUrl: "templates/about-page1.html"
}
}
})
.state('tabs.about.page2', {
url: "/page2",
views: {
'about-page2': {
templateUrl: "templates/about-page2.html"
}
}
});
Is there someone who knows the proper way to do this?
Thanks
Adding Tabs Bar in Ionic Application The tab navigation is created by adding the ion-tabs having ion-tab-bar inside it which creates a tab bar on position defined in the slot property. Each tab button is created using the ion-tab-button with tab property which is the path of tab page resulting navigation.
The ion-tab-bar component is one of many Ionic Framework components used to build apps for Android, iOS, and Progressive Web Apps
Also defined an empty path with redirectTo property set to ‘/tablinks/profile’ so that profile component will be loaded by default when the app is started. The tab navigation is created by adding the ion-tabs having ion-tab-bar inside it which creates a tab bar on position defined in the slot property.
Install the latest version of Ionic CLI by running the following npm command. Now create a new Ionic 5 Angular Application with a blank template by running the following command Now we will create some new tab pages linked with tab navigation and a tab bar page to keep routes for a navigation bar.
I try to example at codePen but I doesn't work as I expected. But I solved your problem in a local project. Be sure you have the last version of ionic or you can update it with:
npm install -g ionic
You are almost there. You need to set a abstract into the views like this:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html",
abstract: true
}
}
})
.state('tabs.about.page1', {
url: "/page1",
views: {
'about-page1': {
templateUrl: "templates/about-page1.html"
}
}
})
.state('tabs.about.page2', {
url: "/page2",
views: {
'about-page2': {
templateUrl: "templates/about-page2.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
});
And using the code that you had commented:
<ion-tabs class="tabs-striped tabs-top tabs-background-stable">
<ion-tab title="Page 1" ui-sref="tabs.about.page1">
<ion-nav-view name="about-page1"></ion-nav-view>
</ion-tab>
<ion-tab title="Page 2" ui-sref="tabs.about.page2">
<ion-nav-view name="about-page2"></ion-nav-view>
</ion-tab>
</ion-tabs>
I comment the previous tab code, specifically this:
<!--<div class="tabs-striped tabs-top tabs-background-stable">
<div class="tabs">
<a class="tab-item" ui-sref="tabs.about.page1">
Page 1
</a>
<a class="tab-item" ui-sref="tabs.about.page2">
Page 2
</a>
</div>
</div>-->
The rest of the HTML code is the same
My ionic version is: 1.3.19
I hope it helps you
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With