Ionic-framework: Ionic v4: Tabs - tabbarLayout options are not shown as expected

[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 tabbarLayout="icon-start">, the tab button icons are still shown on top of the labels:

icon-start:

Other options like icon-end, icon-bottom, icon-hide and title-hide also have layout problems.

title-hide:

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a @ionic/[email protected] project with the CLI, select the tabs starter: ionic start tabs-layout tabs --type angular
2. Open src/app/pages/tabs/tabs.page.html
3. Add tabbarLayout="icon-start" to the <ion-tabs>
4. Run in the browser with npm run start

Related Code

<ion-tabs tabbarLayout="icon-start">
  <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
Tab button icons should be placed at the side of their labels. Other layout options should be positioned correctly.

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.

[cptflammin]

4.0.0-alpha.9

Same issue, tabbarLayout seems to have no effect whatever the value as per comment in tabs.d.ts
/**
* Set the tabbar layout: icon-top, icon-start, icon-end, icon-bottom, icon-hide, title-hide.
*/

Cannot make https://blog.ionicframework.com/tips-tricks-for-ionic-on-desktop/
working despite ionic 4 indications (https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#tabs)

On the other side, tabbarPlacement is working as expected, top is working and bottom as well

[brandyscarney]

Thanks for the issue! Confirmed this is an issue in latest.

[brandyscarney]

Note to team: I started on this issue but I need to discuss the implementation with @manucorporat

[Mobiletainment]

Thank you @brandyscarney!
Is there any progress on this issue? Looking forward to placing the icons next to the title.

[brandyscarney]

@Mobiletainment I haven't gotten back to finishing it yet. I submitted a PR for it so you can see where it's at: https://github.com/ionic-team/ionic/pull/15113

I have fixed the layout itself but there are still some issues with padding and margin between elements.

[brandyscarney]

This has been fixed and will be in the beta.3 release, thanks!