React Linear Progress Overview

    El componente Ignite UI for React Indicador de Progreso Lineal proporciona un indicador visual del proceso de una aplicación a medida que cambia. ElIgrLinearProgress indicador actualiza su apariencia a medida que cambia su estado. Además, puedes combinar este componente con la variedad de colores en rayas o lisos.

    React Linear Progress Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar elIgrLinearProgress CSS necesario y registrar su módulo, así:

    import { IgrLinearProgressModule, IgrLinearProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrLinearProgressModule.register();

    <IgrLinearProgress value="100"></IgrLinearProgress>

    Progress Types

    Puedes establecer el tipo de tu indicador usando elvariant atributo. Hay cinco tipos de indicadores lineales de progreso: primario (por defecto), error, éxito, información y advertencia.

    <IgrLinearProgress value="100" variant="success"></IgrLinearProgress>

    Striped Progress

    Puedes hacer que el indicador sea a rayas, usando lastriped propiedad:

    Indeterminate Progress

    Si quieres rastrear un proceso que no está determinado con precisión, puedes establecer laindeterminate propiedad.

    Animation Duration

    LaanimationDuration propiedad se utiliza para especificar cuánto tiempo debe durar el ciclo de animación. Toma como valor un número que representa la duración de la animación en milisegundos.

    <IgrLinearProgress animationDuration="5000" indeterminate="true"></IgrLinearProgress>

    Text Properties

    Puedes alinear el valor por defecto usando lalabelAlign propiedad. Los valores permitidos son top, bottom, top-start, top-end, bottom-start y bottom-end.

    Para ocultar la etiqueta predeterminada del indicador de progreso, utiliza elhideLabel atributo.

    LalabelFormat propiedad puede usarse para personalizar laIgrLinearProgress etiqueta predeterminada.

    El siguiente ejemplo demuestra la configuración anterior:

    Dynamic Progress

    Puede cambiar dinámicamente el valor del indicador de progreso utilizando controles externos como botones. Para lograr esto, podemos vincular el valor a una propiedad de clase:

    Styling

    ElIgrLinearProgress componente expone partes CSS para casi todos sus elementos internos:

    Nombre Descripción
    track El área de seguimiento del anillo de progreso.
    fill El área del indicador de progreso.
    striped El indicador rayado de progreso.
    label La etiqueta del indicador de progreso.
    value El valor de la etiqueta de progreso.
    indeterminate El progreso en estado indeterminado.
    primary El indicador de progreso del estado primario.
    danger El estado de error del indicador de progreso.
    warning El estado de advertencia del indicador de progreso.
    info El estado de información del indicador de progreso.
    success El estado de éxito del indicador de progreso.

    Usando estas partes CSS tenemos un control casi total del estilo de Progreso Lineal.

    igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}

    API References

    Additional Resources