Skip to main content

 

 

 

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

Progress Barのリファレンス

レイアウトおよびクラス

CSSセレクタ

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

高度なユースケース

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

1.ローカルInteger型変数の「Value」を作成します。

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

1.Progress BarのPercentageパラメータの値を設定します。

1.ProgressBarの色を値に基づいて変更するには、条件を作成して色の使用の限度を設定します。以下の例では、3つの色で異なる進捗状況を表しています。Colorパラメータを「If(Value <= 50, Entities.Color.Red, If( Value > 50 and Value < 75, Entities.Color.Yellow , Entities.Color.Green))」に設定します。

![](<images/progressbar-7-ss.png>)

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

![](<images/progressbar-5.gif>)

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

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

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

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

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

.progress {
    background-color: transparent;
}

  • Was this article helpful?