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