feat(Tabs): Tab list should be scrollable to match Material Design Guidelines
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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.
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion und vergleiche das aktuelle Tab-Verhalten mit der Tabs-Spezifikation von Material Design. Verfolge die Angular Material-Implementierung der Tabs, die für das Scrollen und Verschieben der Tabs verantwortlich ist, und überprüfe anschließend, dass das Wischen auf Mobilgeräten und das Scrollen mit Shift plus Mausrad funktionieren, ohne die Auswahl oder Positionierung zu beeinträchtigen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100