Descripción general del progreso lineal Blazor
El componente Ignite UI for Blazor Linear Progress Indicator proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador IgbLinearProgress
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 componente IgbCalendar
. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto 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 utilizando el atributo variant
. Hay cinco tipos de indicadores de progreso lineal: primario (predeterminado), error, éxito, información y advertencia.
<IgbLinearProgress Value=100 Variant=@ProgressBaseVariant.Success />
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.
<IgbLinearProgress AnimationDuration=5000 Indeterminate=true />
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 IgbLinearProgress
.
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. |