Blazor Resumen del progreso lineal

    El componente Indicador de progreso lineal Ignite UI for Blazor proporciona un indicador visual del proceso de una aplicación a medida que cambia. El IgbLinearProgress indicador 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.

    Blazor Linear Progress Example

    Usage

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbCalendar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbLinearProgress Value=100 />

    Progress Types

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

    <IgbLinearProgress Value=100 Variant=@ProgressBaseVariant.Success />

    Striped Progress

    Puede hacer que el indicador sea seccionado, usando la Striped propiedad:

    Indeterminate Progress

    Si desea realizar un seguimiento de un proceso que no se determina con precisión, puede establecer la Indeterminate propiedad.

    Animation Duration

    La AnimationDuration propiedad se usa 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.

    <IgbLinearProgress AnimationDuration=5000 Indeterminate=true />

    Text Properties

    Puede alinear el valor predeterminado mediante la LabelAlign 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, utilice el HideLabel atributo.

    La LabelFormat propiedad se puede usar para personalizar la IgbLinearProgress 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

    El IgbLinearProgress 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