无法使用ionic2中的选项卡概念创建标题和子标题

Question

i am using side menus to navigate to my tabs page.

I am facing an issues with myheader.

How do i get according to the image given here as img1 using tabs concept in ionic2

enter image description here

I used the code as

<ion-content>

    <ion-tabs tabsPlacement="top" primary>
        <ion-tab [root]="tab1Root" tabTitle="PROFILE"></ion-tab>
        <ion-tab [root]="tab2Root" tabTitle="ORDERS"></ion-tab>
        <ion-tab [root]="tab3Root" tabTitle="PASSWORD"></ion-tab>
    </ion-tabs>


</ion-content>

after this code i am getting the out like the below image

Answer 1

I can't see the entire code, but think the issue with your code is that you're not including the header in the tabs view. Please take a look at this plunker .

Like you can see there, you can achieve that design with this code in your view:

<ion-header>
  <ion-navbar primary>
    <ion-title>
      My Account
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-tabs #myTabs primary>
  <ion-tab [root]="tab1Root" tabTitle="Profile"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Orders"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Password"></ion-tab>
</ion-tabs>