Web Components Resumen del progreso lineal

    The Ignite UI for Web Components Linear Progress Indicator component provides a visual indicator of an application’s process as it changes. The IgcLinearProgressComponent indicator updates its appearance as its state changes. Also, you can style this component with a choice of colors in stripes or solids.

    Web Components Linear Progress Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Before using the IgcLinearProgressComponent, you need to register it as follows:

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

defineComponents(IgcLinearProgressComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcLinearProgressComponent uso es la siguiente:

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

    Progress Types

    You can set the type of your indicator, using the variant attribute. There are five types of linear progress indicators - primary (default), error, success, info, and warning.

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

    Striped Progress

    You can make the indicator striped, using the striped property:

    Indeterminate Progress

    If you want to track a process that is not determined precisely, you can set the indeterminate property.

    Animation Duration

    The animationDuration property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds.

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

    Text Properties

    You can align the default value, using the labelAlign property. Permitted values are top, bottom, top-start, top-end, bottom-start and bottom-end.

    To hide the default label of the progress indicator, use the hideLabel attribute.

    The labelFormat property can be used to customize the IgcLinearProgressComponent default label.

    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

    The IgcLinearProgressComponent component exposes CSS parts for almost all of its inner elements:

    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