angular / angular/components

feat(material/slider): Support for multi word thumb label text

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

In mat slider thumb label, need a support for multi word text. As we can format thumb label text by using **displayWith** property and add suffix or prefix to the number. We have a use case in which using value from mat-slider, we are creating labels like poor, below average, above average, etc. But in current implementation multi word label text is not supported. Words gets wrapped as we give space in the label text string.
![mat-slider-thumb-text](https://github.com/angular/components/assets/101663998/4a079ed4-3256-4a80-99a0-9fc1f6efc975)

### Use Case

We have used mat slider of range {min=0, max=10, step=01} for taking ratings from user
by using the mat slider value I am creating rating labels such as poor, below average, average, above average and excellent. As per the number I want to show that particular label in thumb label text.

[Stackblitz link](https://stackblitz.com/edit/sxcf47?file=src%2Fapp%2Fslider-formatting-example.html,src%2Fapp%2Fslider-formatting-example.css,src%2Findex.html,src%2Fstyles.scss,src%2Fapp%2Fslider-formatting-example.ts,package.json)

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 ví dụ StackBlitz được liên kết, đặc biệt là src/app/slider-formatting-example.html, src/app/slider-formatting-example.css và src/app/slider-formatting-example.ts, để tái hiện nhãn thumb đã được định dạng. Truy vết phần triển khai Angular Material slider thumb-label và đảm bảo văn bản displayWith gồm nhiều từ vẫn nằm trên một nhãn; hoàn tất khi các nhãn như “dưới mức trung bình” được kết xuất mà không bị xuống dòng.

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
Đình trệ
Độ rõ ràng
Khá 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.