angular / angular/components

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

Aperta
#28,599 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/slider feature P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dall’esempio StackBlitz collegato, in particolare da src/app/slider-formatting-example.html, src/app/slider-formatting-example.css e src/app/slider-formatting-example.ts, per riprodurre l’etichetta formattata del thumb. Traccia l’implementazione di Angular Material slider thumb-label e fai in modo che il testo displayWith composto da più parole rimanga in un’unica etichetta; il lavoro è completato quando etichette come «sotto la media» vengono visualizzate senza andare a capo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.