angular / angular/components

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

Ouverte
#28,599 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/slider feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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)

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’exemple StackBlitz lié, en particulier src/app/slider-formatting-example.html, src/app/slider-formatting-example.css et src/app/slider-formatting-example.ts, afin de reproduire le libellé formaté du thumb. Suivez l’implémentation de Angular Material slider thumb-label et faites en sorte que le texte displayWith composé de plusieurs mots reste sur un seul libellé ; le travail est terminé lorsque des libellés tels que « inférieur à la moyenne » s’affichent sans retour à la ligne.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.