0
257
ViewsMaterial 2 md-tab-nav-bar wraps on mobile
I want to use tabs for navigation. I followed the documentation verbatim:
<nav md-tab-nav-bar>
<a md-tab-link
*ngFor="let link of navLinks"
[routerLink]="link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{tabLink.label}}
</a>
</nav>
<router-outlet></router-outlet>
This looks and works great on desktop:
but looks hideous on mobile:
If I use the md-tab-group (non-nav) tabs, they look great on mobile:
<md-tab-group>
<md-tab label="Navigation tab 1"></md-tab>
<md-tab label="Navigation tab 2"></md-tab>
<md-tab label="Navigation tab 3"></md-tab>
<md-tab label="Navigation tab 4"></md-tab>
<md-tab label="Navigation tab 5"></md-tab>
</md-tab-group>
Am I doing something wrong, or is this this a bug in Material 2? Is there a way to make md-tab-nav-bar responsive, or to make md-tab-group work as a nav bar?
3 answers
Answer question0
Yep, <nav mat-tab-nav-bar> doesn't work as the <mat-tab-group>. A possible quick solution I used is to just make the container scroll:
.mat-tab-nav-bar {
white-space: nowrap;
overflow: auto;
}
Which looks acceptable and is clean enough, but shows the native scrollbar while scrolling.
0
I just found this issue that outlines a disconnect between md-tabs and md-tab-nav-bar:
The current "md-tab-group" implementation is already looking great (Dynamic height, scrolling, pagination when tabs exceed container width etc..) But with the "md-tab-nav-bar" component none of these features are available.
It's been assigned and has an "important" tag, so I guess this is an acknowledged by the Material team.
Be sure to head over there and give it a 👍 to help get it prioritized.
0
There is a potential workaround found at the bottom of the issue that adamport mentioned.
Paraphrased from the workaround (original credits to daiky00):
<nav mat-tab-nav-bar>
<mat-tab-group>
<mat-tab *ngFor="let yourVariable of yourLinks">
<ng-template mat-tab-label>
<a mat-tab-link
[routerLink]="yourVariable.path"
[routerLinkActiveOptions]="{exact: true}"
routerLinkActive #rla="routerLinkActive">
{{yourVariable.data['label']}} <!-- or however your links are set up-->
</a>
</ng-template>
</mat-tab>
</mat-tab-group>
</nav>