[Tabs] Make header pagination scroll faster
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
#### 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).
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu tại src/material/tabs/paginated-tab-header.ts, ở phương thức _scrollHeader(), hiện đang di chuyển viewport của danh sách tab một phần ba chiều dài của nó. Đánh giá khoảng cách cuộn được đề xuất hoặc khả năng cấu hình khoảng cách này, sau đó xác minh rằng một lần nhấp vào phân trang có thể hiển thị nhóm tab tiếp theo trong ví dụ tab chính thức, bao gồm cả trường hợp trên thiết bị di động với sáu tab.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Tính năng
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 45/100