Description
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