Components: headerPosition="below" does not effect nav mat-tab-nav-bar

Created on 18 Nov 2018  路  1Comment  路  Source: angular/components

Bug, feature request, or proposal:

Bug/Feature - Adding headerPosition="below" does not effect nav mat-tab-nav-bar; I would like it to cause the divider to appear above the labels.

What is the expected behavior?

The divider line should appear above the tab labels as it does for mat-tab-group.

What is the current behavior?

headerPosition="below" has no effect on nav mat-tab-nav-bar.

What are the steps to reproduce?

Add headerPosition="below" to a working mat-tab-nav-bar.

https://stackblitz.com/edit/angular-8lxwwf?file=app/tab-nav-bar-basic-example.html

What is the use-case or motivation for changing an existing behavior?

I'm trying to use the mat-tab-nav-bar as a bottom nav within my app and as such I'd like the tabs to appear below the divider line.

<router-outlet></router-outlet>
<div class="spacer"></div>
<nav mat-tab-nav-bar mat-stretch-tabs headerPosition="below" >
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.spacer {
  padding-bottom: 50px;
}

The headerPosition attribute may not be the way to achieve this as it refers to placing the tab headers below the content; which is being done "manually" in this case; it would be useful to have a way to move the divider above the labels though.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

N/A

Is there anything else we should know?

N/A

P4 materiatabs has pr

Most helpful comment

Adding class="mat-tab-group-inverted-header" to my nav mat-tab-nav-bar works as a workaround.

>All comments

Adding class="mat-tab-group-inverted-header" to my nav mat-tab-nav-bar works as a workaround.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

maku picture maku  路  59Comments

MariovanZeist picture MariovanZeist  路  59Comments

jelbourn picture jelbourn  路  94Comments

alaawerfelli picture alaawerfelli  路  148Comments

abdulkareemnalband picture abdulkareemnalband  路  165Comments