Community

Applies only to Traditional Web Apps

Progress Bar

Last updated
Save as PDF

タスクの進捗状況をバーの値の増加によって表示します。

ProgressBarは、タスクフローの現在の進捗状況を表示するために使用します。また、円形の進捗や部分円形の進捗で進捗状況を表示することもできます。パターンを使用してタスクの進捗状況を示す場合は、一貫性が保たれるようにしてください。たとえば、ある画面でアクションに直線形の表示を使用する場合、アプリの他の画面で同じアクションに円形の表示を使用しないようにしてください。

使用方法

パーセンテージを定義する変数を構成します。ProgressBarの形、サイズ、方向、色を変更することもできます。

ProgressBarパターンをプレビューにドラッグします。
変数を使用して、表示するパーセンテージ値を設定します。
コンテンツをプレースホルダで設定します。
パブリッシュしてテストします。

入力パラメータ

入力名	説明	型	必須	デフォルト値
Percentage	表示するパーセンテージ。関数やローカル変数を使用できます。	Integer	False	50
Color	背景色を設定します。	Color Identifier	False	Entities.Color.Primary
Shape	形を設定します。	Shape Identifier	False	Entities.Shape.Rounded
Size	サイズを設定します。	ProgressBarSize Identifier	False	Entities.ProgressBarSize.Base
IsInline	値のプレースホルダの方向を設定します。Trueの場合、値のプレースホルダは線の最後に配置され、ラベルのプレースホルダは表示されません。Falseの場合、値とラベルのプレースホルダは線上に配置されます。	Boolean	False	False
ExtendedClass	このブロックにカスタムスタイルクラスを追加します。Text	False	なし

レイアウトおよびクラス

CSSセレクタ

要素	CSSクラス	説明
.progress-container	.progress-container.flex-direction-column	IsInlineパラメータがFalseの場合
.progress-container	.progress-container.flex-direction-row	IsInlineパラメータがFalseの場合

高度なユースケース

進捗バーの色を値に基づいて変更する

ローカルInteger型変数の「Value」を作成します。
ProgressBarパターンをプレビューにドラッグします。
ProgressBarのPercentageパラメータの値を設定します。
ProgressBarの色を値に基づいて変更するには、条件を作成して色の使用の限度を設定します。以下の例では、3つの色で異なる進捗状況を表しています。Colorパラメータを「If(Value <= 50, Entities.Color.Red, If( Value > 50 and Value < 75, Entities.Color.Yellow , Entities.Color.Green))」に設定します。
パブリッシュしてテストします。

進捗バーのスタイルを変更する

カスタムCSSを使用して、進捗バーのスタイルを変更することができます。これをアプリケーションに実装するには、以下のCSSをコピーしてテーマに追加します。

.progress {
    padding: var(--space-s);`
    border: var(--space-xs) solid var(--color-primary);`
}

進捗バーの背景を削除する

背景を削除するには、以下のCSSスニペットを使用します。

.progress {
    background-color: transparent;
}

Training

Documentation