0
262
ViewsMaterial 2 md-tab-nav-bar ajusta en el móvil
Quiero usar pestañas para la navegación. Seguí la documentación al pie de la letra:
<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>Esto se ve y funciona muy bien en el escritorio:
pero se ve horrible en el móvil:
Si uso las pestañas md-tab-group (sin navegación), se ven muy bien en dispositivos móviles:
<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> 
¿Estoy haciendo algo mal o se trata de un error en el Material 2? ¿Hay alguna manera de hacer que md-tab-nav-bar responda, o hacer que md-tab-group funcione como una barra de navegación?
3 answers
Answer question0
Sí, <nav mat-tab-nav-bar> no funciona como <mat-tab-group> . Una posible solución rápida que utilicé es simplemente hacer que el contenedor se desplace:
.mat-tab-nav-bar { white-space: nowrap; overflow: auto; }Lo que parece aceptable y es lo suficientemente limpio, pero muestra la barra de desplazamiento nativa mientras se desplaza.
0
Acabo de encontrar este problema que describe una desconexión entre md-tabs y md-tab-nav-bar:
La implementación actual de "md-tab-group" ya se ve muy bien (altura dinámica, desplazamiento, paginación cuando las pestañas exceden el ancho del contenedor, etc.) Pero con el componente "md-tab-nav-bar" ninguna de estas funciones está disponible.
Ha sido asignado y tiene una etiqueta "importante", así que supongo que esto es reconocido por el equipo de Material.
Asegúrate de ir allí y darle un 👍 para ayudar a priorizarlo.
0
Hay una posible solución alternativa que se encuentra en la parte inferior del problema que mencionó Adamport.
Parafraseado de la solución alternativa (créditos originales a 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>