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.
Ejemplo de progreso lineal Blazor
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Blazor y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
Antes de utilizar IgbLinearProgress, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
razor
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:
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.
Puedes hacer que el indicador sea rayado, usando la propiedad striped:
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Progreso indeterminado
Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad indeterminate.
Duración de la animación
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.
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:
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Progreso dinámico
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:
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLinearProgressModule),
typeof(IgbIconButtonModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Estilo
El componente Indicador de progreso lineal expone partes CSS para casi todos sus elementos internos.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
await builder.Build().RunAsync();
}
}
}cs