angular / angular/components

[Tabs] Make header pagination scroll faster

Ouverte
#17,129 3 commentaires 4 réactions 0 personnes assignées Voir sur GitHub
area: material/tabs feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Feature Description

Consider the following example:
Browsing a page with 6 tabs on mobile (only 3 fit at a time).
To get to tab 6, you have to click the pagination arrow 3 times.
That's pretty slow. I would expect one click to show tabs 4, 5, 6.
You can try this on the first official [example](https://material.angular.io/components/tabs/examples) (add some tabs in StackBlitz).

![mat-tab-scrolling-slow](https://user-images.githubusercontent.com/5672108/65159595-07c93d80-da3d-11e9-9e47-159c9fc3693f.gif)

#### Use Case

Making the app more convenient on mobile.

#### More info

The scrolling is handled in `_scrollHeader()` method in [paginated-tab-header.ts](https://github.com/angular/components/blob/master/src/material/tabs/paginated-tab-header.ts#L395):
_"Move the scroll distance one-third the length of the tab list's viewport."_
The simplest solution would be replacing `viewLength / 3` with `viewLength` or `viewLength * 3 / 4`.
Another option is to make this fraction configurable through an `@Input` similarly to [animationDuration](https://material.angular.io/components/tabs/api).

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez dans src/material/tabs/paginated-tab-header.ts, au niveau de la méthode _scrollHeader(), qui déplace actuellement le viewport de la liste d’onglets d’un tiers de sa longueur. Évaluez la distance de défilement proposée ou sa configurabilité, puis vérifiez qu’un clic sur la pagination peut afficher le groupe d’onglets suivant dans l’exemple officiel d’onglets, y compris le cas mobile à six onglets.

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é
2/5
Temps estimé
1-3 heures
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

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