React Circular Progress (円形プログレス) の概要
Ignite UI for React Circular Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。丸形インジケーターは状態変更で外観を更新します。
React Circular Progress の例
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrCircularProgress とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrCircularProgressModule, IgrCircularProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCircularProgressModule.register();
<IgrCircularProgress value="100"></IgrCircularProgress>
進行状況タイプ
variant 属性を使用して、インジケーターのタイプを設定できます。Circular Progress インジケーターには、primary (デフォルト)、error、success、info、および warning の 5 種類があります。
<IgrCircularProgress value="100" variant="success"></IgrCircularProgress>
不確定のプログレス
正確に決定されていないプロセスをトラックしたい場合、indeterminate プロパティを設定できます。また、hideLabel プロパティを設定することで、Ignite UI for React IgrCircularProgress のデフォルトのラベルを非表示にし、公開された labelFormat プロパティを介して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。
<IgrCircularProgress value="100" indeterminate="true"></IgrCircularProgress>
次のサンプルは、上記の構成を示しています:
アニメーション期間
IgrCircularProgress コンポーネントの animationDuration プロパティを使用して、アニメーション サイクルにかかる時間をミリ秒単位で指定できます。
<IgrCircularProgress animationDuration="5000" indeterminate="true"></IgrCircularProgress>
グラデーション プログレス
単色の代わりにカラー グラデーションを使用するためにプログレス バーをカスタマイズするには、公開された gradient スロットとグラデーション境界を定義する IgrCircularGradient を使用します。
[!Note] Ignite UI for React
IgrCircularProgressのグラデーション スロットとして定義されたIgrCircularGradientごとに、SVG stop 要素が作成されます。color、offset、およびopacityとして渡された値は、それ以上の検証なしで、SVG 要素の stop-color、offset、および stop-opacity として設定されます。
<IgrCircularProgress >
<IgrCircularGradient slot="gradient" offset="0%" color="#ff9a40">
</IgrCircularGradient>
<IgrCircularGradient slot="gradient" offset="50%" color="#1eccd4">
</IgrCircularGradient>
<IgrCircularGradient slot="gradient" offset="100%" color="#ff0079">
</IgrCircularGradient>
</IgrCircularProgress>
スタイル設定
IgrCircularProgress コンポーネントは、その内部要素のほとんどすべての 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);
}