angular / angular/components

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

Ouverte
#19,449 10 commentaires 28 réactions 0 personnes assignées Voir sur GitHub
area: material/tabs feature material spec P3
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.