angular / angular/components

bug(mat-menu-item): iconPositionEnd and matButtonIcon is not available for mat-menu-item

Đang mở
#27,006 4 bình luận 6 reaction 0 người được giao Xem trên GitHub
area: material/menu P3 regression
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ả

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.x

### Description

Since there was a change in mat-menu-item, that all icons are moved to the start, it is not possible anymore to place icons after the label. This breaks our current design (we have icons in front and after the label)

v15: https://github.com/angular/components/blob/15.2.x/src/material/menu/menu-item.html
v14: https://github.com/angular/components/blob/14.2.x/src/material/menu/menu-item.html

The solution would be to also support `iconPositionEnd` for mat-menu-items as it was done for mat-button.
https://github.com/angular/components/blob/15.2.x/src/material/button/button.html#L11

`matButtonIcon` should be supported as well.

_Bonus_: It would probably be even better to _not_ pull the icons automatically to a certain position (like it was before) or to have an additional attribute, so that an icon is not effected by the pulling (e.g. `iconPositionInline` --> `...`). I am not sure, if this is possible with the new mdc and the change happened in the first place, because the new css-class effected the icons. Nevertheless, iconPositionEnd should be possible.

Thank you!
~Manuel

### Reproduction

```

settings
Settings
open_in_new

```

### Expected Behavior

It should be possible to have buttons at the start and at the end (or inline).

### Actual Behavior

Both/all icons are in the start.

### Environment

- Angular: 15
- CDK/Material: 15
- Browser(s): all
- Operating System (e.g. Windows, macOS, Ubuntu): all

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

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

Hướng nghiên cứu

So sánh src/material/menu/menu-item.html trong các reference v15.2.x và v14.2.x, sau đó kiểm tra ví dụ liên quan src/material/button/button.html để tìm iconPositionEnd và matButtonIcon. Sử dụng bản tái hiện mat-menu-item được cung cấp với các icon ở trước và sau nhãn; được xem là hoàn thành khi icon ở cuối có thể vẫn ở cuối còn icon ở đầu vẫn ở đầu.

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
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
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.