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 のデフォルト ラベルをカスタマイズできます。
次のサンプルは、上記の構成を示しています:
ダイナミック プログレス
ボタンなどの外部コントロールを使用して進行状況インジケーターの値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。
スタイル設定
IgbLinearProgress コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。
| 名前 | 説明 |
|---|---|
track |
プログレス リングのトラック領域。 |
fill |
進行状況インジケーター領域。 |
striped |
進行状況のストライプ インジケーター。 |
label |
進行状況インジケーター ラベル。 |
value |
進行状況ラベルの値。 |
indeterminate |
進行状況の indeterminate 状態。 |
primary |
進行状況インジケーターの primary 状態。 |
danger |
進行状況インジケーターの error 状態。 |
warning |
進行状況インジケーターの warning 状態。 |
info |
進行状況インジケーターの info の状態。 |
success |
進行状況インジケーターの success 状態。 |
この CSS パーツを使用すると、Linear Progress のスタイルをほぼ完全に制御できます。
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)
}