angular / angular/components

feat(Tabs): Extend Tabs customization in the mat-tab-header

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

Currently, the mat tab component does not have any way to customize the contents of the `mat-tab-header` except for `mat-tab`. And there is no way to add a custom ng-content since mat-tab-header is not accessible like mat-tab-group or mat-tab.
I would like to customize mat-tab-header (which is only a viewable element in devtools and not accessible to the developer) so that I can extend the ui to look like a firefox or chrome browser tab area.
![image](https://github.com/angular/components/assets/53593899/b7b6f98a-46a4-420f-8319-2e2cc36179e3)
As you can see in the tab area of a browser, there is obviously tabs but also buttons at the sides. For example, for chrome, there is tabs sections, the plus button, and then outside of the tabs section the dropdown menu and the minimize/max and close buttons.

Another example is https://www.telerik.com/products/winforms/tabbedform.aspx under the Overview section or https://docs.devexpress.com/WindowsForms/115183/controls-and-libraries/forms-and-user-controls/tabbed-form

Currently the tab component looks like the top section of the below picture:
![image](https://github.com/angular/components/assets/53593899/08efca13-d627-4636-a45a-01002c456fc4)
I'd like to be able to put components like buttons or dropdown menu in the tab component but outside of the pagination buttons (as shown in the bottom section of the above picture)

### Use Case

Case: I would like to be able to add a button to view all the tabs in a vertical scroll down style like chrome's dropdown menu button beside the minimize button on the right. Maybe expand it even more by adding other buttons to close all tabs or other functionalities. (basically make it look like the pictures/links mentioned under the 'feature description section of this feature request.)

Currently, the workaround would be to add dropdown menu as a tab item. this is not preferred as when there is paging, that dropdown menu tab item will move as well. And it will behave like a tab item instead of a button.
In addition, the dropdown button in the tab item will also be between the two pagination buttons when it should not as the dropdown button should be stationary independent from the tab section+paging.

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

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách đọc các component mat-tab-header, mat-tab và mat-tab-group hiện có để hiểu header và pagination được cấu thành như thế nào. Xác định một API để đặt các nút tùy chỉnh hoặc nội dung khác bên ngoài các mục tab được phân trang, sau đó xác minh rằng nội dung được thêm vào vẫn cố định khi các tab được phân trang và các control kiểu trình duyệt được yêu cầu có thể được đặt ở đó.

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ó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/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.