angular / angular/components

[Tabs] Make header pagination scroll faster

Đang mở
#17,129 3 bình luận 4 reaction 0 người được giao Xem trên GitHub
area: material/tabs feature P3
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).

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

Hướng dẫn đóng góp

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.