[Tabs] Make header pagination scroll faster
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### 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).
Guía de contribución
Línea de trabajo
Comience en src/material/tabs/paginated-tab-header.ts, en el método _scrollHeader(), que actualmente desplaza el viewport de la lista de pestañas en un tercio de su longitud. Evalúe la distancia de desplazamiento propuesta o su configurabilidad y, a continuación, verifique que un clic de paginación pueda mostrar el siguiente grupo de pestañas en el ejemplo oficial de pestañas, incluido el caso móvil de seis pestañas.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 45/100