thanh tab lồng nhau trong Ionic Khung

Question

Có cách nào trong khuôn khổ Ionic có một thanh tab lồng nhau như thế này:

Tôi đã thử nó trong Codepen, nhưng nó không thực sự làm việc:

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

có những người biết cách thích hợp để làm điều này?

Cảm ơn

Answer 1

tôi cố gắng dụ tại codePen nhưng tôi không làm việc như tôi mong đợi. Nhưng tôi đã giải quyết được vấn đề của bạn trong một dự án địa phương. Hãy chắc chắn rằng bạn có phiên bản mới nhất của ion hoặc bạn có thể cập nhật phiên bản đó với:

npm install -g ionic 

Bạn sắp hoàn tất. Bạn cần phải thiết lập một trừu tượng thành các quan điểm như thế này:

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

}); 

Và bằng cách sử dụng mã mà bạn đã nhận xét:

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

tôi nhận xét mã tab trước đó, cụ thể này:

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

Phần còn lại của mã HTML giống nhau

Phiên bản ionic của tôi là: 1.3.19

Tôi hy vọng nó sẽ giúp bạn