Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Progress Circleのリファレンス

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.progress-circle .progress-circle .progress-circle-content IsSemiCircleパラメータがFalseの場合
.progress-circle .progress-circle .progress-semi-circle-content IsSemiCircleパラメータがTrueの場合

高度なユースケース

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

  1. 画面で、Progressという名前のローカル変数(Integer型)を作成します。

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

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

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

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

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

Progress Circleの丸い角を削除する

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

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

Progress Circleの軌跡の太さを変更する

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

  • Was this article helpful?