0

Tengo el progress bar pero no me muestra el texto (Es decir el porcentaje de cuanto lleva, ejemplo 10%).

<ion-progress-bar [value]="progressValue" style="height: 1em; border-radius: 8px">
<p>{{ progressText }} %</p>
</ion-progress-bar>

en el .ts tengo

  progressValue: number;
  progressText: string;

  constructor() {
    this.progressValue = 0.044;
    this.calcularProgressText();
  }
  calcularProgressText() {
    this.progressText = this.progressValue + '%';
    console.log( this.progressText)
  }

como puedo hacer para mostrar el texto dentro de la barra en el ion-progress-bar?

1 respuesta 1

0

Directamente no se puede porque el control no tiene esa funcionalidad. Pero se puede hacer de otra forma:

<div class="progress-value">
  <ion-progress-bar [value]="progress"></ion-progress-bar>
  <span>18%</span>
</div>

Se agrupan el progress-bar y el span y con css se hace el efecto:

.progress-value ion-progress-bar {
  height: 20px;
}

.progress-value span {
  margin-top: -20px;
  position: relative;
  z-index: 100;
  display: block;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

Todo es desplazar el span con el valor del portaje hacia arriba y ya queda sobre el progress-bar. Ahí se puede ajustar al gusto ya el tamaño y posición del texto "dentro" del progress-bar.

Aquí te dejo un ejemplo en vivo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.