Nested Tab-Leiste in Ionic Rahmen

Question

Gibt es eine Möglichkeit in Ionic Rahmen eine verschachtelte Tab-Leiste wie diese haben:

ich es in Codepen versucht, aber es funktioniert nicht wirklich:

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" 
     } 
    } 
}); 

gibt es jemanden, den richtigen Weg, weiß dies zu tun?

Dank

Answer 1

Ich versuche, bei codePen Beispiel, aber ich nicht wie ich erwartet hatte. Aber ich habe dein Problem in einem lokalen Projekt gelöst. Stellen Sie sicher, dass Sie die letzte Version von ion haben, oder aktualisieren Sie sie mit:

npm install -g ionic 

Sie sind fast da. Sie benötigen einen abstrakt in die Ansichten wie folgt festgelegt:

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"); 

}); 

Und mit dem Code, den Sie kommentiert hatte:

<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> 

ich den vorherigen Registerkarte Code kommentieren, speziell diese:

<!--<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>--> 

Der Rest des HTML-Codes ist der gleiche

Meine ionische Version ist: 1.3.19

Ich hoffe es hilft Ihnen