feat(Tabs): Tab list should be scrollable to match Material Design Guidelines
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
#### 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dalla riproduzione collegata di StackBlitz e confronta il comportamento attuale delle schede con la specifica delle schede di Material Design. Segui l’implementazione delle schede di Angular Material responsabile dello scorrimento e della traslazione delle schede, quindi verifica che lo scorrimento tramite swipe su dispositivi mobili e con Shift più la rotella del mouse funzionino senza compromettere la selezione o il posizionamento.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100