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

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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


@using IgniteUI.Blazor.Controls

<div class="root">
    <IgbLinearProgress Value=100/>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Usage

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 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" />
razor

<IgbLinearProgress Value=100 />
razor

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 />
razor

Striped Progress

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

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbLinearProgress Value=100 Variant=@StyleVariant.Primary/>

    <IgbLinearProgress Value=100 Variant=@StyleVariant.Success Striped=true/>

    <IgbLinearProgress Value=100 Variant=@StyleVariant.Danger />

    <IgbLinearProgress Value=100 Variant=@StyleVariant.Info Striped=true />

    <IgbLinearProgress Value=100 Variant=@StyleVariant.Warning />
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

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 />
razor

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:

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .progress-container {
            margin-bottom: 15px;
        }
    </style>

    <IgbLinearProgress class="progress-container" Value=100 Variant=@StyleVariant.Primary/>

    <IgbLinearProgress class="progress-container" Value=100 Variant=@StyleVariant.Success
                       Indeterminate=true Striped=true/>

    <IgbLinearProgress Value=100 Variant=@StyleVariant.Danger LabelFormat="Custom Text"
                       LabelAlign=@LinearProgressLabelAlign.BottomEnd />

    <IgbLinearProgress class="progress-container" Value=100 Variant=@StyleVariant.Info Striped=true HideLabel=true />

    <IgbLinearProgress class="progress-container" Value=100 Variant=@StyleVariant.Warning
                       LabelAlign="@LinearProgressLabelAlign.BottomStart" />
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

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:

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbLinearProgress Max=100 LabelAlign=@LinearProgressLabelAlign.BottomStart Value=@ProgressValue/>
    <div class="buttonContainer">
        <IgbIconButton @ref="RemoveIconRef" @onclick="OnRemoveIconClick" IconName="remove" Collection="material" />
        <IgbIconButton @ref="AddIconRef" @onclick="OnAddIconClick" IconName="add" Collection="material" />
    </div>
</div>

@code {

    private double ProgressValue { get; set; }
    private IgbIconButton AddIconRef { get; set; }
    private IgbIconButton RemoveIconRef { get; set; }

    protected override void OnInitialized()
    {

        this.ProgressValue = 50;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender && this.AddIconRef != null && this.RemoveIconRef != null)
        {
            await this.AddIconRef.EnsureReady();
            await this.RemoveIconRef.EnsureReady();

            string addIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/></svg>";
            string removeIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 13H5v-2h14v2z'/></svg>";

            await this.AddIconRef.RegisterIconFromTextAsync("add", addIcon, "material");
            await this.RemoveIconRef.RegisterIconFromTextAsync("remove", removeIcon, "material");
        }
    }

    private void OnAddIconClick(MouseEventArgs args)
    {
        this.ProgressValue = this.ProgressValue + 10;
    }

    private void OnRemoveIconClick(MouseEventArgs args)
    {
        if(this.ProgressValue > 0)
        {
            this.ProgressValue = this.ProgressValue - 10;
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

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.

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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


@using IgniteUI.Blazor.Controls

<div class="root">
    <style>
        igc-linear-progress::part(track) {
            background-color: #D3D3D3
        }

        igc-linear-progress::part(fill) {
            background-color: #ECAA53
        }

        igc-linear-progress::part(label) {
            color: #ECAA53
        }
    </style>

    <IgbLinearProgress Value=100/>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

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)
}
css