Estoy tratando de agregar Progress Bar en la aplicación React.
Estoy usando CSS semántico: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Desde Documentación ( https://semantic-ui.com/modules/progress.html#/definition ), encontré el siguiente código de muestra pero no pude agregar/cambiar el progreso
<div class="ui green progress"> <div class="bar"></div> </div>Lo que probé:
<div class="ui green progress" dataValue="1" dataTotal="100" id="progress"> <div class="bar"></div> </div>Pero se muestra como anterior (sin cambios).
¿Cómo agregar/cambiar el value de progreso (puede aumentar/disminuir en el futuro) a la barra de progreso en ReactJS?
Añadir un value es suficiente para continuar
Gracias por adelantado
Según el enlace que proporcionó, está utilizando SemanticUI estándar (que no se actualiza desde 2018).
En ese caso, debe seguir la página de uso del objeto Barra de progreso para usarlo como desea la IU semántica. Todos los ejemplos usan jQuery, ya que es un requisito previo de la interfaz de usuario semántica.
Por ejemplo, puede actualizar data-percent
<div class="ui progress" data-percent="74" id="example"> <div class="bar"></div> <div class="label">74% Funded</div> </div>y luego llamar
$('#example').progress();o puede actualizar directamente a través de JS con
$('#example').progress({ percent: 22 });Otra solución, dado que está utilizando React, es pasar a Semantic UI React , que tiene una implementación adecuada de la barra de progreso y, en general, se adapta mejor a React.