Progress Bar - use width instead of scaleX to allow rounded progress bar

Đang mở Phù hợp với người mới
#29,607 4 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
75/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu tại core/src/components/progress-bar/progress-bar.tsx, ở dòng được liên kết khoảng dòng 102, và kiểm tra cách phần tử tiến trình được render. Xác minh rằng việc thay đổi cách định kích thước tiến trình sang width vẫn giữ các đầu bo tròn mà không làm biến dạng border radius, đồng thời xác nhận component vẫn hiển thị phạm vi tiến trình mong đợi.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

package: core type: feature request

https://github.com/ionic-team/ionic-framework/blob/e1c0f457966ab79c7a8774ec9bd0b34458067305/core/src/components/progress-bar/progress-bar.tsx#L102

The scaleX() also scales border-radius. If you use border radius on the top-left and bottom-right to make a round tip to the progress bar, it distorts across the width of the progress bar.

Changing to:

<div part="progress" class="progress" style={{ width: `calc(100% * ${finalValue})` }}></div>,

would scale it similarly without scaling the border-radius

Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
2 ngày 20 giờ
Pull request đã merge (30 ngày)
35

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

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

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của ionic-team/ionic-framework

Tất cả issue của ionic-team/ionic-framework

Issue tương tự

Thêm issue về TypeScript

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.