Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Progress Bar

Progress Barを使用すると、バーの値の増加によってパーセンテージ値を表示し、タスクフローの現在の進捗状況を示すことができます。

Progress Bar UIパターンの使用方法

  1. Service StudioのツールボックスでProgress Barを検索します。

    Progress Barウィジェットが表示されます。

  2. ツールボックスから、Progress Barウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  3. Properties]タブで、Progressプロパティに進捗のパーセンテージを入力します。この例では「55」と入力していますが、関数やローカル変数を使用することもできます。

  4. Progress Barのタイトルとして表示するテキストを追加します。この例では、「On Going」を追加しています。

  5. Properties]タブでオプションのプロパティを設定し、形、色、サイズなどのProgress Barのルックアンドフィールをカスタマイズすることができます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
Progress(Integer型): 必須 Progress Barに表示されるパーセンテージ。整数(通常は0~100)、関数、ローカル変数を使用できます。
Color(Color Identifier型): オプション Progress Barの色。事前定義された利用可能なバッジの色は、赤、オレンジ、黄、ライム、緑、青、紫、ピンクなどです。

  • 空白 - Progress Barの色がアプリを作成したときに選択した色になります(デフォルト値)。
  • Entities.Color.Red - Progress Barの色が赤色になります。
Height(Integer型): オプション Progress Barの高さ(ピクセル単位)。デフォルト値は12。
AnimateInitialProgress (Boolean型): オプション Trueの場合、Progress Barのパーセンテージの進捗がアニメーション化されます。これがデフォルトです。Falseの場合、進捗はアニメーション化されません。
Text(Text型): オプション OutSystems UIでは非推奨です。
Shape(Shape Identifier型): オプション Progress Barの形を設定します。以下のオプションが事前定義されています。
  • Rounded
  • Soft Rounded
  • Sharp

  • 空白 - Progress Barの角が丸くなります(Entities.Shape.Rounded)。これがデフォルトです。
  • Entities.Shape.Sharp - Progress Barの角がシャープになります。
ExtendedClass(Text型): オプション Progress Bar UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるProgress Bar UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるProgress Bar UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?