angular / angular/components

feat(Tabs): Tab list should be scrollable to match Material Design Guidelines

Abierto
#19,449 10 comentarios 28 reacciones 0 asignados Ver en GitHub
area: material/tabs feature material spec P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Reproduction

https://stackblitz.com/edit/angular-yk3xrb

Steps to reproduce:
1. Load above stackblitz in mobile view.
2. Try to grab and swipe the tabs left or right.
* Alternatively use `Shift` + `Mouse Scroll` to attempt to scroll the tabs left/right.

#### Expected Behavior

The tabs should be x-scrollable as defined in the spec: https://material.io/components/tabs (Switch from `Fixed` to `Scrollable` type)

#### Actual Behavior

Tabs can not be scrolled by swiping/shift scrolling.

This is mainly a big issue for mobile devices. As tapping the left and right buttons is much slower and unnatural than swiping over the tabs.
You can manually set `overflow-x: scroll` on the container, but that breaks as soon as you select another tab since angular applies translation to the whole thing. See [this stackoverflow ](https://stackoverflow.com/questions/57888846/set-horizontal-scroll-in-angular-material-tabs) for attempts at solving the issue.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz y compara el comportamiento actual de las pestañas con la especificación de pestañas de Material Design. Rastrea la implementación de pestañas de Angular Material responsable del desplazamiento y la traslación de las pestañas, y luego verifica que el deslizamiento en dispositivos móviles y el desplazamiento con Shift más la rueda del ratón funcionen sin romper la selección ni el posicionamiento.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.