Progress Bar
タスクの進捗状況をバーの値の増加によって表示します。
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;
}
