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