Barra de progreso

Proporciona una representación visual del tiempo que le queda a un usuario para completar una operación concreta.

La visualización de la vista Barra de progreso da al usuario una comprensión inmediata de cuántas pestañas, páginas o campos de entrada se han completado. Se utiliza generalmente como cabecera en formularios web o en pestañas.

Propiedades de configuración

En Configuración, establezca o modifique las propiedades de aspecto y comportamiento de la vista. En Sucesos, establezca las propiedades de configuración de la fórmula.

Tamaño de pantalla
Una propiedad de configuración que tenga el icono Tamaños de pantalla El icono Tamaños de pantalla junto al nombre de propiedad puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como valor predeterminado.
Definiciones de temas
Las definiciones de temas especifican los colores y los estilos de una vista y determinan su aspecto. Puede obtener una vista previa del aspecto de las vistas en el editor de temas. Consulte Temas.
En la tabla siguiente se muestran las propiedades de configuración del aspecto para la vista Barra de progreso:
Tabla 1. Propiedades de configuración de aspecto para Barra de progreso
Propiedad de configuración del aspecto Descripción Tipo de datos
Estilo de color Especifica un estilo de color para el color de relleno de la barra de progreso. Los colores corresponden a variables en el tema especificado. El estilo de color predeterminado es Predeterminado (gris). TooltipColorStyle
Con bandas Cuando está seleccionado, añade bandas a la barra de progreso. Boolean
Activo Cuando está seleccionado y Con bandas también está seleccionado, hace que se muevan las bandas de la barra de progreso. Boolean
Radio Especifica la redondez de las esquinas de la barra de progreso, en píxeles o en unidades em. Por ejemplo, 15px o 1em. Si solo se especifica un número sin especificar unidad, se interpreta que se trata de píxeles.

De forma predeterminada, no hay ningún radio de borde especificado.

 String
Ancho El icono Tamaños de pantalla Especifica la anchura de la barra de progreso en píxeles, en porcentajes o en unidades em. Por ejemplo: 800px, o 80% o 50em. Si solo se especifica un número sin especificar unidad, se interpreta que se trata de píxeles. String
Altura El icono Tamaños de pantalla Especifica la altura del pozo en píxeles o en unidades em. Por ejemplo, 15px o 1em. Si solo se especifica un número sin especificar unidad, se interpreta que se trata de píxeles. De forma predeterminada, no hay ninguna altura especificada. String
En la tabla siguiente se muestran las propiedades de configuración del comportamiento para la vista Barra de progreso:
Tabla 2. Propiedades de configuración del comportamiento para Barra de progreso
Propiedad de configuración del comportamiento Descripción Tipo de datos
Valor máximo Especifica el valor numérico total del progreso (no se debe confundir con Anchura). Por ejemplo, 100. Integer

Ejemplo

En este ejemplo hay las siguientes propiedades de configuración definidas para la vista Barra de progreso:

  • Propiedades de configuración del comportamiento:
    • Valor máximo se establece en 100.
  • Propiedades de configuración del aspecto:
    • Estilo de color se establece en Info.
    • Con bandas está seleccionado.
    • Activo está seleccionado.
    • Radio se establece en 1.
    • Ancho se establece en 25%.
  • Propiedades de configuración de sucesos:
    • Para el suceso Al cargar, se utiliza el método setProgress para establecer la barra de progreso en 50: me.setProgress(50);

Estas propiedades y sus valores dan como resultado una barra de progreso medio llena, de color azul claro, con bandas y animada con esquinas redondeadas, que ocupa el 25% del ancho de página.

Sucesos

Establezca o modifique las propiedades de configuración de la fórmula y los manejadores de sucesos de la vista en las propiedades de Sucesos. Puede establecer que los sucesos se activen mediante programación o cuando un usuario interactúe con la vista. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario.
En la tabla siguiente se muestran las propiedades de configuración de fórmula para la vista Barra de progreso:
Tabla 3. Propiedades de configuración de fórmula para Barra de progreso
Propiedad de configuración de fórmula Descripción Tipo de datos
Fórmula Expresión a utilizar para calcular el progreso.

Para obtener más información sobre fórmulas, consulte Fórmulas.

 String
La vista Barra de progreso tiene los siguientes tipos de manejadores de sucesos:
  • On load: activado cuando se carga la página.
  • On click: Se activa cuando se pulsa la barra de progreso.

Métodos

Están disponibles los métodos siguientes para esta vista:
  • setWidth(): Establece la anchura de la barra de progreso.
  • getWidth(): Obtiene el tamaño configurado de la anchura de la barra de progreso (incluyendo la unidad).
  • setHeight(): Establece la altura de la barra de progreso.
  • getHeight(): Obtiene el tamaño configurado de la altura de la barra de progreso (incluyendo la unidad).
  • setColorStyle(): Establece el color de la barra de progreso.
  • setRadius(): Establece el radio (redondez) de la barra de progreso.
  • setProgress(): Establece el estado de progreso.
  • getProgress(): Obtiene el estado de progreso.
  • setMaximum(): Establece el valor máximo de la barra de progreso.

Para obtener más información sobre cómo utilizar estos métodos, consulte la API de Barra de progreso JavaScript .

Recursos adicionales

Para obtener información sobre cómo crear un coach o una página, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidady Atributos HTML), consulte Ver propiedades.