feat(Tabs): Tab list should be scrollable to match Material Design Guidelines
- 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
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