Lavanya Parvathi Lavanya Parvathi - 3 months ago 33
TypeScript Question

unable to create header and subheader using tabs concept in ionic2

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

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>