Progress Circle
円形または半円形の進捗表示を簡単に作成できます。
使用タイミング
ProgressCircleは、操作フローの現在の進捗状況を表示するために使用します。進捗状況に応じて、円形のバッジの部分円が増加していきます。進捗バーや部分円形の進捗の表示タイプで進捗状況を表示することもできます。パターンを使用してタスクの進捗状況を示す場合は、一貫性が保たれるようにしてください。たとえば、ある画面でアクションに直線形の表示を使用する場合、アプリの他の画面で同じアクションに円形の表示を使用しないようにしてください。
使用方法
カスタムコンテンツを作成し、それを［Content］プレースホルダに配置します。
-
ProgressCircleパターンをプレビューにドラッグします。
-
進捗状況値を定義します。
-
必要とされるコンテンツをプレースホルダで設定します。
-
パブリッシュしてテストします。
入力パラメータ
| 入力名 | 説明 | 型 | 必須 | デフォルト値 |
|---|---|---|---|---|
| Progress | 表示するパーセンテージ。関数やローカル変数を使用できます。 | Integer | True | なし |
| ProgressColor | 円形の進捗上のストロークの色。 | Color Identifier | False | Entities.Color.Primary |
| TrailColor | 円形の進捗の空の部分の色。 | Color Identifier | False | Entities.Color.Neutral5 |
| CircleThickness | 進捗状況をマークする円の太さ。 | Integer | False | 4 |
| AnimateInitialProgress | ゼロから進捗状況値までの円形の進捗をアニメーション化します。 | Boolean | False | True |
| IsSemiCircle | 進捗バーのタイプを円形から半円形に変更します。 | Boolean | False | False |
| AdvancedFormat | 入力によって提供されるもの以外の追加オプションを使用できます。詳細については、https://kimmobrunfeldt.github.io/pro...bar.js/をご覧ください。例: { easing: 'bounce' } |
Text | False | なし |
レイアウトおよびクラス
CSSセレクタ
| 要素 | CSSクラス | 説明 |
|---|---|---|
| .progress-circle | .progress-circle .progress-circle-content | IsSemiCircleパラメータがFalseの場合 |
| .progress-circle | .progress-circle .progress-semi-circle-content | IsSemiCircleパラメータがTrueの場合 |
高度なユースケース
円形の進捗の色を値に基づいて変更する
-
画面で、Integer型のローカル変数「Progress」を作成します。
-
ProgressCircleパターンをプレビューにドラッグします。
-
ProgressCircleのProgressパラメータの値を設定します。
-
ProgressCircleの色を値に基づいて変更するには、条件を作成して限度を設定します。
以下の例では、3つの色で異なる進捗状況を表しています。ProgressColorパラメータの値を「
If(Progress <= 50, Entities.Color.Red, If( Progress > 50 and Progress < 75, Entities.Color.Yellow , Entities.Color.Green))」に設定します。
-
パブリッシュしてテストします。
ProgressCircleの丸い角を削除する
丸い角を削除するには、以下のCSSスニペットを使用します。
.progress-circle svg {
stroke-linecap: square;
}
ProgressCircleの軌跡の太さを変更する
軌跡の太さを変更するには、AdvancedFormatプロパティを「{trailWidth: 1}」に設定します。
