Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested tab bar in Ionic Framework

Is there a way in Ionic framework to have a nested tab bar like this:

enter image description here

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

like image 846
Adrien Glitchbone Avatar asked Sep 23 '14 11:09

Adrien Glitchbone


People also ask

How do I create a tab bar in ionic?

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.

What is the ion-tab-bar component?

The ion-tab-bar component is one of many Ionic Framework components used to build apps for Android, iOS, and Progressive Web Apps

How to create tab navigation using ion-tabs?

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.

How to create a tab page in ionic 5 angular application?

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.


1 Answers

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

like image 77
LTroya Avatar answered Oct 19 '22 14:10

LTroya