Descripción general del progreso lineal Web Components

    El componente Indicador de progreso lineal Ignite UI for Web Components proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador IgcLinearProgressComponent actualiza su apariencia a medida que cambia su estado. Además, puede diseñar este componente con una selección de colores en rayas o sólidos.

    Web Components Linear Progress Example

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Antes de utilizar IgcLinearProgressComponent, debe registrarlo de la siguiente manera:

    import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de empezar a utilizarlo IgcLinearProgressComponent es la siguiente:

    <igc-linear-progress value="100"></igc-linear-progress>

    Progress Types

    Puede establecer el tipo de su indicador utilizando el atributo variant. Hay cinco tipos de indicadores de progreso lineal: primario (predeterminado), error, éxito, información y advertencia.

    <igc-linear-progress value="100" variant="success"></igc-linear-progress>

    Striped Progress

    Puedes hacer que el indicador sea rayado, usando la propiedad striped:

    Indeterminate Progress

    Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad indeterminate.

    Animation Duration

    La propiedad animationDuration 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.

    <igc-linear-progress animation-duration="5000" indeterminate></igc-linear-progress>

    Text Properties

    Puede alinear el valor predeterminado utilizando la propiedad labelAlign. Los valores permitidos son top, bottom, top-start, top-end, bottom-start y bottom-end.

    Para ocultar la etiqueta predeterminada del indicador de progreso, utilice el atributo hideLabel.

    La propiedad labelFormat se puede utilizar para personalizar la etiqueta predeterminada IgcLinearProgressComponent.

    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

    El componente Indicador de progreso lineal expone partes CSS para casi todos sus elementos internos.

    La siguiente tabla enumera todas las partes CSS expuestas por Linear Progress:

    Nombre Descripción
    pista El área de seguimiento del anillo de progreso.
    llenar El área del indicador de progreso.
    a rayas El indicador rayado de progreso.
    etiqueta La etiqueta del indicador de progreso.
    valor El valor de la etiqueta de progreso.
    indeterminado El progreso en estado indeterminado.
    primario El indicador de progreso del estado primario.
    peligro El estado de error del indicador de progreso.
    advertencia El estado de advertencia del indicador de progreso.
    información El estado de información del indicador de progreso.
    éxito El estado de éxito del indicador de progreso.
    arriba La posición de la etiqueta de progreso.
    inicio superior La posición de la etiqueta de progreso.
    extremo superior La posición de la etiqueta de progreso.
    abajo La posición de la etiqueta de progreso.
    inicio desde abajo La posición de la etiqueta de progreso.
    extremo inferior La posición de la etiqueta de progreso.

    API References

    Additional Resources