Ionic v4: Tabs - tabbbarPlacement="top" renders tabs above the page header

[FdezRomero]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.8
   @angular-devkit/schematics : 0.6.8
   @angular/cli               : 6.0.8
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.1
   npm    : 6.1.0
   OS     : macOS High Sierra

Describe the Bug
When using <ion-tabs tabbarPlacement="top">, the tabs are rendered above the page header and toolbar:

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a @ionic/angular@4.0.0-alpha.7 project with the CLI, select the tabs starter: ionic start tabs-placement tabs --type angular
2. Open src/app/pages/tabs/tabs.page.html
3. Add tabbarPlacement="top" to the <ion-tabs>
4. Run in the browser with npm run start

Related Code

<ion-tabs tabbarPlacement="top">
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Expected Behavior
Tabs should be placed at the top of the screen, below the pages <ion-header>.

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[jtorfs01]

Hi, im having the same issue in Ionic v4 beta 2. Did you find a solution for this?

[nimzzdeveloper]

Any Updates on this ?

[yuricamara]

Same issue here with "@ionic/angular": "4.0.0-beta.13"

[brandyscarney]

Thank you for the issue! Because each tab contains its content, it isn't possible to place the ion-tab-bar underneath the header at the top, unless it is projected inside of each tab or specified in each header. Our Tab Bar (ion-tab-bar) component is the equivalent to the following in ios/md:

• Material Design Bottom Navigation: https://material.io/design/components/bottom-navigation.html
• iOS Tab Bar: https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

Because the spec for both of these supports the placement only at the bottom, we will not be adding the placement top back to our tabs at this time.

Instead, if you are looking for a component to place at the top of the page under the header, our Segment (ion-segment) component has recently been updated to the equivalent of the following:

• Material Design Tabs: https://material.io/design/components/tabs.html
• iOS Segmented Control: https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/

With the latest release we have given full control over the ion-tab-bar element. This means that if it is absolutely desired to place it at the top, you can still put the ion-tab-bar in each content, like the following:

<ion-tab tab="tab-three">

  <ion-header>
    <ion-toolbar>
      <ion-title>Tab Three</ion-title>
    </ion-toolbar>

    <ion-tab-bar>
      <ion-tab-button tab="star-tab">
        <ion-icon name="star"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="globe-tab">
        <ion-icon name="globe"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="facebook-tab">
        <ion-icon name="logo-facebook"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>

  </ion-header>

  <ion-content padding>
    Tab Three
  </ion-content>

</ion-tab>

Please let me know if you have any questions. Thanks!

[FdezRomero]

Thanks @brandyscarney!

Makes sense not to support it anymore if it’s not natively supported on iOS and Android.

But since it was supported in Ionic 3 (I used it in the Savelist PWA on desktop) it would nice to have it documented in the breaking changes.

Best,
Rodrigo

[williamnankap]

Hello guys, can you help me to solve this problems

1- How to put tabs on top (but below the menu toolbar) without use material design?
2- please i have an ionic 4 project how to use material design with my existing project?
3- what is the best way to design an app in ionic 4?