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>
スタイル設定
IgcCircularProgressComponent コンポーネントは、その内部要素のほとんどすべての 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);
}
API リファレンス
IgcButtonComponentIgcCalendarComponentIgcCircularGradientComponentIgcCircularProgressComponent- スタイル設定 & テーマ