Blazor Circular Progress (円形プログレス) の概要
Ignite UI for Blazor Circular Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。丸形インジケーターは状態変更で外観を更新します。
Blazor Circular Progress の例
使用方法
IgbCircularProgress を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
また、追加の CSS ファイルをリンクして、スタイルを IgbCalendar コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbCircularProgress Value=100/>
進行状況タイプ
variant 属性を使用して、インジケーターのタイプを設定できます。Circular Progress インジケーターには、primary (デフォルト)、error、success、info、および warning の 5 種類があります。
<IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success />
不確定のプログレス
正確に決定されていないプロセスをトラックしたい場合、indeterminate プロパティを設定できます。また、hideLabel プロパティを設定することで、Ignite UI for Blazor IgbCircularProgress のデフォルトのラベルを非表示にし、公開された labelFormat プロパティを介して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。
<IgbCircularProgress Value=100 Indeterminate=true/>
次のサンプルは、上記の構成を示しています:
アニメーション期間
IgbCircularProgress コンポーネントの animationDuration プロパティを使用して、アニメーション サイクルにかかる時間をミリ秒単位で指定できます。
<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />
グラデーション プログレス
単色の代わりにカラー グラデーションを使用するためにプログレス バーをカスタマイズするには、公開された gradient スロットとグラデーション境界を定義する IgbCircularGradient を使用します。
[!Note] 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>
スタイル設定
Ignite UI for Blazor Circular Procress Indicator コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。
次の表に、Circular Progress によって公開されるすべての CSS パーツを示します:
| 名前 | 説明 |
|---|---|
| svg | 進行状況 SVG 要素。 |
| gradient_start | 進行線形グラデーションの開始色。 |
| gradient_end | 進行線形グラデーションの終了色。 |
| track | プログレス リングのトラック領域。 |
| fill | 進行状況インジケーター領域。 |
| label | 進行状況ラベル。 |
| value | 進行状況ラベルの値。 |
| indeterminate | 進行状況の indeterminate 状態。 |
| primary | 進行状況インジケーターの primary 状態。 |
| danger | 進行状況インジケーターの error 状態。 |
| warning | 進行状況インジケーターの warning 状態。 |
| info | 進行状況インジケーターの info の状態。 |
| success | 進行状況インジケーターの success 状態。 |