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.
The divider line should appear above the tab labels as it does for mat-tab-group
.
headerPosition="below"
has no effect on nav mat-tab-nav-bar
.
Add headerPosition="below"
to a working mat-tab-nav-bar
.
https://stackblitz.com/edit/angular-8lxwwf?file=app/tab-nav-bar-basic-example.html
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.
N/A
N/A
Adding class="mat-tab-group-inverted-header"
to my nav mat-tab-nav-bar
works as a workaround.
Most helpful comment
Adding
class="mat-tab-group-inverted-header"
to mynav mat-tab-nav-bar
works as a workaround.