Web Components Linear Progress (リニア プログレス) の概要
Ignite UI for Web Components Linear Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。IgcLinearProgressComponent インジケーターは状態変更で外観を更新します。また、このコンポーネントがストライプまたは実線色でスタイル設定できます。
Web Components Linear Progress の例
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
IgcLinearProgressComponent を使用する前に、次のように登録する必要があります:
import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcLinearProgressComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
IgcLinearProgressComponent の使用を開始する最も簡単な方法は次のとおりです:
<igc-linear-progress value="100"></igc-linear-progress>
進行状況タイプ
variant 属性を使用して、インジケーターのタイプを設定できます。リニア プログレス インジケーターには、primary (デフォルト)、error、success、info、および warning の 5 種類があります。
<igc-linear-progress value="100" variant="success"></igc-linear-progress>
ストライプ プログレス
striped プロパティを使用して、インジケーターをストライプにすることができます:
不確定のプログレス
正確に決定されていないプロセスをトラックしたい場合、indeterminate プロパティを設定できます。
アニメーション期間
animationDuration プロパティは、アニメーション サイクルにかかる時間を指定するために使用されます。値として、アニメーションの継続時間をミリ秒単位で表す数値を取ります。
<igc-linear-progress animation-duration="5000" indeterminate></igc-linear-progress>
Text プロパティ
labelAlign プロパティを使用して、デフォルト値を調整できます。許可される値は、top、bottom、top-start、top-end、bottom-start、および bottom-end です。
進行状況インジケーターのデフォルトのラベルを非表示にするには、hideLabel 属性を使用します。
labelFormat プロパティを使用して、IgcLinearProgressComponent のデフォルト ラベルをカスタマイズできます。
次のサンプルは、上記の構成を示しています:
ダイナミック プログレス
ボタンなどの外部コントロールを使用して進行状況インジケーターの値を動的に変更できます。これを実現するには、値をクラス プロパティにバインドします。
スタイル設定
Linear Progress Indicator コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。
次の表に、Linear Progress によって公開されるすべての CSS パーツを示します:
| 名前 | 説明 |
|---|---|
| track | プログレス リングのトラック領域。 |
| fill | 進行状況インジケーター領域。 |
| striped | 進行状況のストライプ インジケーター。 |
| label | 進行状況インジケーター ラベル。 |
| value | 進行状況ラベルの値。 |
| indeterminate | 進行状況の indeterminate 状態。 |
| primary | 進行状況インジケーターの primary 状態。 |
| danger | 進行状況インジケーターの error 状態。 |
| warning | 進行状況インジケーターの warning 状態。 |
| info | 進行状況インジケーターの info の状態。 |
| success | 進行状況インジケーターの success 状態。 |
| top | 進行状況ラベルの配置。 |
| top-start | 進行状況ラベルの配置。 |
| top-end | 進行状況ラベルの配置。 |
| bottom | 進行状況ラベルの配置。 |
| bottom-start | 進行状況ラベルの配置。 |
| bottom-end | 進行状況ラベルの配置。 |