Nexus – Elemento: Progress Bar

image_pdfimage_print

¿Qué es?

Progress Bar es un componente de tipo Display. Muestra una barra de progreso con porcentaje, útil para representar el avance de un proceso. Al arrastrarlo al lienzo viene con un valor de ejemplo precargado (60 de 100).

Propiedades

Al seleccionar Progress Bar en el lienzo, el panel derecho muestra “Properties of ProgressBar” con las siguientes opciones:

  • Component ID: identificador único del componente, autogenerado (ej. prg_b9ce0397).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).
  • Value: valor actual de la barra (ej. 60).
  • Max: valor máximo que representa el 100% de la barra (ej. 100).
  • Label: texto opcional para acompañar la barra (vacío por defecto).
  • Show Value: casilla que muestra u oculta el porcentaje/valor numérico sobre la barra.
  • Variant: menú desplegable que define el color de la barra. Opciones: Primary, Success, Warning, Danger, Info.
  • Size: menú desplegable que define el grosor de la barra. Opciones: Small, Medium, Large.
  • Animated: casilla que hace que la barra se rellene con una animación progresiva hasta llegar al valor definido en Value, en vez de mostrarse directamente ya completa.
  • Style → Custom Class: campo para asignar una clase CSS personalizada.
  • Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
  • Delete Component: elimina el componente del lienzo.
  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .

Ejemplo de uso

El progreso se controla ajustando Value en relación a Max (por ejemplo, Value: 60 y Max: 100 representa un 60%). Con Variant se puede dar significado visual al progreso — por ejemplo, usar Success cuando el proceso llega al 100%, o Danger si representa un límite excedido. Activando Animated, la barra se llena de forma progresiva (efecto de carga) hasta alcanzar el valor definido, en lugar de mostrarse ya completa desde el inicio.