feat(Tabs): Tab list should be scrollable to match Material Design Guidelines
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz liée et comparez le comportement actuel des onglets avec la spécification des onglets de Material Design. Suivez l’implémentation des onglets d’Angular Material responsable du défilement et de la translation des onglets, puis vérifiez que le balayage sur mobile et le défilement avec Shift et la molette de la souris fonctionnent sans perturber la sélection ni le positionnement.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100