Blazor Circular Progress (円形プログレス) の概要

Ignite UI for Blazor Circular Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。丸形インジケーターは状態変更で外観を更新します。

Blazor Circular Progress の例

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

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

無料で試してみる

使用方法

IgbCircularProgress を使用する前に、次のように登録する必要があります:

// in Program.cs file

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

また、追加の CSS ファイルをリンクして、スタイルを IgbCalendar コンポーネントに適用する必要があります。以下は、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

進行状況タイプ

variant 属性を使用して、インジケーターのタイプを設定できます。Circular Progress インジケーターには、primary (デフォルト)、error、success、info、および warning の 5 種類があります。

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

不確定のプログレス

正確に決定されていないプロセスをトラックしたい場合、indeterminate プロパティを設定できます。また、hideLabel プロパティを設定することで、Ignite UI for Blazor IgbCircularProgress のデフォルトのラベルを非表示にし、公開された labelFormat プロパティを介して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。

<IgbCircularProgress Value=100 Indeterminate=true/>
razor

次のサンプルは、上記の構成を示しています:

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

アニメーション期間

IgbCircularProgress コンポーネントの animationDuration プロパティを使用して、アニメーション サイクルにかかる時間をミリ秒単位で指定できます。

<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />
razor

グラデーション プログレス

単色の代わりにカラー グラデーションを使用するためにプログレス バーをカスタマイズするには、公開された gradient スロットとグラデーション境界を定義する IgbCircularGradient を使用します。

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

Ignite UI for Blazor IgbCircularProgress のグラデーション スロットとして定義された IgbCircularGradient ごとに、SVG stop 要素が作成されます。color、offset、および opacity として渡された値は、それ以上の検証なしで、SVG 要素の stop-color、offset、および stop-opacity として設定されます。

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

スタイル設定

IgbCircularProgress コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。

名前	説明
svg	進行状況 SVG 要素。
gradient_start	進行線形グラデーションの開始色。
gradient_end	進行線形グラデーションの終了色。
track	プログレス リングのトラック領域。
fill	進行状況インジケーター領域。
label	進行状況ラベル。
value	進行状況ラベルの値。
indeterminate	進行状況の indeterminate 状態。
primary	進行状況インジケーターの primary 状態。
danger	進行状況インジケーターの error 状態。
warning	進行状況インジケーターの warning 状態。
info	進行状況インジケーターの info の状態。
success	進行状況インジケーターの 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

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

API リファレンス

• IgbButton
• IgbCalendar
• IgbCircularGradient
• IgbCircularProgress
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)