angular / angular/components

[Tabs] Make header pagination scroll faster

Offen
#17,129 3 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/tabs feature P3
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).

![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).

Beitragsleitfaden

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.