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>
スタイル設定
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);
}