Skip to main content

 

パターン

 

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

 

OutSystems

Progress Bar

タスクの進捗状況をバーの値の増加によって表示します。

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

使用方法

パーセンテージを定義する変数を構成します。ProgressBarの形、サイズ、方向、色を変更することもできます。

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

  2. 変数を使用して、表示するパーセンテージ値を設定します。

  3. コンテンツをプレースホルダで設定します。

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

入力パラメータ

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

高度なユースケース

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

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

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

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

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

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

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

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

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

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

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

.progress {
    background-color: transparent;
}

  • Was this article helpful?