React Linear Progress (リニア プログレス) の概要

Ignite UI for React Linear Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。IgrLinearProgress インジケーターは状態変更で外観を更新します。また、このコンポーネントがストライプまたは実線色でスタイル設定できます。

React Linear Progress の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrLinearProgress とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrLinearProgressModule, IgrLinearProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrLinearProgressModule.register();

IgrLinearProgress の使用を開始する最も簡単な方法は次のとおりです:

<IgrLinearProgress value="100"></IgrLinearProgress>

進行状況タイプ

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

<IgrLinearProgress value="100" variant="success"></IgrLinearProgress>

ストライプ プログレス

striped プロパティを使用して、インジケーターをストライプにすることができます:

不確定のプログレス

正確に決定されていないプロセスをトラックしたい場合、Indeterminate プロパティを設定できます。

アニメーション期間

AnimationDuration プロパティは、アニメーション サイクルにかかる時間を指定するために使用されます。値として、アニメーションの継続時間をミリ秒単位で表す数値を取ります。

<IgrLinearProgress animationDuration="5000" indeterminate="true"></IgrLinearProgress>

Text プロパティ

LabelAlign プロパティを使用して、デフォルト値を調整できます。許可される値は、top、bottom、top-start、top-end、bottom-start、および bottom-end です。

進行状況インジケーターのデフォルトのラベルを非表示にするには、HideLabel 属性を使用します。

LabelFormat プロパティを使用して、IgrLinearProgress のデフォルト ラベルをカスタマイズできます。

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

ダイナミック プログレス

ボタンなどの外部コントロールを使用して進行状況インジケーターの値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。

スタイル設定

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

この 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)
}

API リファレンス

その他のリソース

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