Skip to content

[Tabs] Make header pagination scroll faster #17129

@anisabboud

Description

@anisabboud

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 (add some tabs in StackBlitz).

mat-tab-scrolling-slow

Use Case

Making the app more convenient on mobile.

More info

The scrolling is handled in _scrollHeader() method in paginated-tab-header.ts:
"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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/tabsfeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions