angular / angular/components

[Tabs] Make header pagination scroll faster

未关闭
#17,129 3 条评论 4 个 reaction 已指派 0 人 在 GitHub 查看
area: material/tabs feature P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### 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).

贡献指南

打开贡献指南

调研方向

从 src/material/tabs/paginated-tab-header.ts 中的 _scrollHeader() 方法开始。该方法目前会将标签列表视口移动其长度的三分之一。评估所提议的滚动距离或可配置性,然后验证在官方标签示例中,点击一次分页即可显示下一组标签,包括移动端六个标签的情况。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。