[Tabs] Make header pagination scroll faster
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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).

#### 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).
Beitragsleitfaden
Rechercherichtung
Beginnen Sie in src/material/tabs/paginated-tab-header.ts bei der Methode _scrollHeader(), die das Viewport der Tab-Liste derzeit um ein Drittel ihrer Länge verschiebt. Bewerten Sie die vorgeschlagene Scroll-Distanz oder Konfigurierbarkeit und überprüfen Sie anschließend, dass ein Klick auf die Paginierung im offiziellen Tabs-Beispiel die nächste Tab-Gruppe anzeigen kann, einschließlich des mobilen Falls mit sechs Tabs.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 45/100