angular / angular/components

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

Abierto
#28,599 2 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/slider feature P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el ejemplo de StackBlitz enlazado, especialmente con src/app/slider-formatting-example.html, src/app/slider-formatting-example.css y src/app/slider-formatting-example.ts, para reproducir la etiqueta formateada del thumb. Traza la implementación de Angular Material slider thumb-label y haz que el texto de displayWith con varias palabras permanezca en una sola etiqueta; se considera terminado cuando etiquetas como «por debajo de la media» se renderizan sin saltos de línea.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.