angular / angular/components

feat(progress-bar): Missing `--mdc-linear-progress-active-indicator-shape` property for progress-bar

Đang mở
#28,554 5 bình luận 19 reaction 0 người được giao Xem trên GitHub
area: material/progress-bar 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

Currently if I want to change the shape of the progress bar to be round like, I only have the `--mdc-linear-progress-track-shape` to set the track shape, but not the same option for the shape of the active-indicator, which will still be square.
Also, only setting the `--mdc-linear-progress-track-shape`, will result in the active indicator overflowing, leaving me with an inconsistent progress-bar (see 1st picture)

Hence that leaves me with the better option of just setting the `border-radius` of the `mat-progress-bar` element itself, because this doesn't cause the active-indicator to overflow. In this case the `--mdc-linear-progress-track-shape` becomes redundant.

1. Screenshot with `--mdc-linear-progress-track-shape: 4px;`, causing the active-indicator to overflow:

image

2. Screenshot with `--mdc-linear-progress-track-shape: 4px;` and `border-radius: 4px`, rendering the `--mdc-linear-progress-track-shape` redundant:

image

3. Screenshot with only `border-radius: 4px;` leaving me with an almost round progress bar, except that the active-indicator is not actually round.

image

So there need to be an option to set the `--mdc-linear-progress-active-indicator-shape` like for other components, so that the active-indicator can be made round, as shown in the [Token and Specs section in the Material 3 specification](https://m3.material.io/components/progress-indicators/specs)

### Use Case

This would enable a very relevant an normal use case that is also shown in the [Token and Specs section in the Material 3 specification](https://m3.material.io/components/progress-indicators/specs).

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

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

Hướng nghiên cứu

Bắt đầu với component progress-bar và theo dõi cách --mdc-linear-progress-track-shape được áp dụng cho track và active indicator. So sánh kiểu dáng với phần Token and Specs của progress-indicator trong Material 3, sau đó xác minh rằng active-indicator shape option mới bo tròn indicator mà không bị tràn.

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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
55/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.