Blazor 선형 진행 개요

Ignite UI for Blazor 선형 진행 표시기 구성 요소는 애플리케이션 프로세스가 변경될 때 시각적 표시기를 제공합니다. IgbLinearProgress 표시기는 상태가 변경될 때 모양이 업데이트됩니다. 또한 이 구성 요소의 스타일을 줄무늬 또는 단색으로 선택할 수 있습니다.

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 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コピー

이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

용법

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule));
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

<IgbLinearProgress Value=100 />
razor

진행 유형

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

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

스트라이프 진행

​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 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 속성을 설정하면 됩니다.

애니메이션 기간

​animationDuration 속성은 애니메이션 주기에 걸리는 시간을 지정하는 데 사용됩니다. 애니메이션 지속 시간을 밀리초 단위로 나타내는 숫자를 값으로 사용합니다.

<IgbLinearProgress AnimationDuration=5000 Indeterminate=true />
razor

텍스트 속성

​labelAlign 속성을 사용하여 기본값을 정렬할 수 있습니다. 허용되는 값은 top, Bottom, top-start, top-end, Bottom-start 및 Bottom-end 입니다.

진행률 표시기의 기본 레이블을 숨기려면 hideLabel 속성을 사용하십시오.

​labelFormat 속성을 사용하여 IgbLinearProgress 기본 레이블을 사용자 정의할 수 있습니다.

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

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 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コピー

동적 진행

버튼과 같은 외부 컨트롤을 사용하여 진행률 표시기의 값을 동적으로 변경할 수 있습니다. 이를 달성하기 위해 값을 클래스 속성에 바인딩할 수 있습니다.

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 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コピー

스타일링

이 IgbLinearProgress 구성 요소는 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다.

이름	설명
track	진행률 링의 트랙 영역입니다.
fill	진행률 표시기 영역입니다.
striped	진행 줄무늬 표시기입니다.
label	진행률 표시기 레이블입니다.
value	진행률 레이블 값입니다.
indeterminate	진행 불확정 상태입니다.
primary	진행률 표시기 기본 상태입니다.
danger	진행률 표시기 오류 상태입니다.
warning	진행률 표시기 경고 상태입니다.
info	진행률 표시기 정보 상태입니다.
success	진행률 표시기 성공 상태입니다.

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

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

API 참조

• IgbButton
• IgbCalendar
• IgbLinearProgress
• Styling & Themes

추가 리소스

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브