Blazor Circular 진행 상황 개요

Ignite UI for Blazor Circular Progress Indicator 구성 요소는 애플리케이션 프로세스가 변경될 때 시각적 표시기를 제공합니다. 원형 표시기는 상태가 변경될 때 모양이 업데이트됩니다.

Blazor Circular 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(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="root">

    <style>
        #circularProgress {
            margin: 20px;
            --diameter: 50px;
        }
    </style>

    <IgbCircularProgress id="circularProgress" 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

IgbCircularProgress를 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
razor

IgbCalendar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

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

<IgbCircularProgress Value=100/>
razor

Progress Types

variant 속성을 사용하여 표시기 유형을 설정할 수 있습니다. 순환 진행률 표시기에는 기본 (기본값), 오류, 성공, 정보 및 경고의 5가지 유형이 있습니다.

<IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success  />
razor

Indeterminate Progress

정확하게 결정되지 않은 프로세스를 추적하려면 다음을 설정할 수 있습니다. indeterminate 속성. 또한 Ignite UI for Blazor의 기본 레이블을 숨길 수 있습니다. IgbCircularProgress 설정하여 hideLabel 속성 및 노출된 진행률 표시기 기본 레이블을 사용자 정의합니다. labelFormat 재산.

<IgbCircularProgress Value=100 Indeterminate=true/>
razor

다음 샘플은 위 구성을 보여줍니다.

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(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="root">

    <style>
        #circularProgress {
            --diameter: 50px;
        }
    </style>

    <IgbCircularProgress id="circularProgress" Indeterminate=true />
</div>

@code {
    

}razor

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

Animation Duration

당신은 사용할 수 있습니다 animationDuration의 재산 IgbCircularProgress 애니메이션 주기에 걸리는 시간을 밀리초 단위로 지정하는 구성요소입니다.

<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />
razor

Gradient Progress

단색 대신 색상 그라데이션을 사용하기 위해 진행률 표시줄을 사용자 정의하는 것은 노출된 gradient 슬롯과 그라데이션 중지점을 정의하는 IgbCircularGradient 통해 수행할 수 있습니다.

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(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
#sampleContent {
width: 300px;
display: flex;
align-items: center;
margin-top: 30px;
}

#circularProgress {
margin-right: 50px;
margin-left: 20px;
--diameter: 100px;
--stroke-thickness: 5px;
}
</style>

<div id="sampleContent">
    <IgbCircularProgress @ref="CircularProgressRef" id="circularProgress" Max=100 Value=@ProgressValue>
        <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
        <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
        <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
    </IgbCircularProgress>
    <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 IgbCircularProgress CircularProgressRef { get; set; }
    private double ProgressValue { get; set; }

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

    protected override void OnInitialized()
    {

        this.ProgressValue = 0;
    }

    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

For each IgbCircularGradient defined as gradient slot of Ignite UI for Blazor IgbCircularProgress a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

<IgbCircularProgress>
    <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
    <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
    <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
</IgbCircularProgress>
razor

Styling

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

이름	설명
`svg`	진행 SVG 요소입니다.
`gradient_start`	진행 선형 그라데이션 시작 색상입니다.
`gradient_end`	진행 선형 그라데이션 끝 색상입니다.
`track`	진행률 링의 트랙 영역입니다.
`fill`	진행률 표시기 영역입니다.
`label`	진행률 레이블입니다.
`value`	진행률 레이블 값입니다.
`indeterminate`	진행 불확정 상태입니다.
`primary`	진행률 표시기 기본 상태입니다.
`danger`	진행률 표시기 오류 상태입니다.
`warning`	진행률 표시기 경고 상태입니다.
`info`	진행률 표시기 정보 상태입니다.
`success`	진행률 표시기 성공 상태입니다.

이 CSS 부분을 사용하여 Circular Progress 스타일을 거의 완전히 제어할 수 있습니다.


igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}

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 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(IgbCircularProgressModule));
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="root">

    <style>
        igc-circular-progress {
            margin: 20px;
            --diameter: 50px;
        }

        igc-circular-progress::part(gradient_end),
        igc-circular-progress::part(gradient_start) {
            stop-color: #72da67;
        }

        igc-circular-progress::part(track) {
            stroke: rgb(216, 211, 211);
        }
    </style>

    <IgbCircularProgress Indeterminate=true/>
</div>

@code {
    

}razor

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