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

Abierto Apto para principiantes
#29,607 4 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
75/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza en core/src/components/progress-bar/progress-bar.tsx, en la línea enlazada alrededor de la 102, e inspecciona cómo se renderiza el elemento de progreso. Verifica que cambiar el dimensionamiento del progreso a width conserve los extremos redondeados sin distorsionar el border radius, y confirma que el componente siga mostrando el rango de progreso esperado.

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

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
2 d 20 h
PR fusionados (30 d)
35

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de ionic-team/ionic-framework

Todos los issues de ionic-team/ionic-framework

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.