angular / angular/components

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

Aperta
#19,449 10 commenti 28 reazioni 0 assegnatari Vedi su GitHub
area: material/tabs feature material spec P3
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.