Skip to main content

 

パターン

 

従来のWebアプリにのみ適用されます

 

OutSystems

Progress Circle

円形または半円形の進捗表示を簡単に作成できます。

使用タイミング

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

使用方法

カスタムコンテンツを作成し、それを[Content]プレースホルダに配置します。

  1. ProgressCircleパターンをプレビューにドラッグします。

  2. 進捗状況値を定義します。

  3. 必要とされるコンテンツをプレースホルダで設定します。

  4. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
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の場合

高度なユースケース

円形の進捗の色を値に基づいて変更する

  1. 画面で、Integer型のローカル変数「Progress」を作成します。

  2. ProgressCircleパターンをプレビューにドラッグします。

  3. ProgressCircleのProgressパラメータの値を設定します。

  4. ProgressCircleの色を値に基づいて変更するには、条件を作成して限度を設定します。

    以下の例では、3つの色で異なる進捗状況を表しています。ProgressColorパラメータの値を「If(Progress <= 50, Entities.Color.Red, If( Progress > 50 and Progress < 75, Entities.Color.Yellow , Entities.Color.Green))」に設定します。

  5. パブリッシュしてテストします。

ProgressCircleの丸い角を削除する

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

.progress-circle svg {
    stroke-linecap: square;
}

ProgressCircleの軌跡の太さを変更する

軌跡の太さを変更するには、AdvancedFormatプロパティを「{trailWidth: 1}」に設定します。

  • Was this article helpful?