Skip to main content

 

 

 

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

Progress Circle

Progress Circle UIパターンを使用すると、操作フローの現在の進捗状況を表示できます。進捗状況に応じて、円形のバッジの部分円が増加していきます。

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

この例では、クリックするごとに円形の進捗を増加するボタンを作成します。

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

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

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

  3. 画面名を右クリックし、[Add Local Variable]を選択して、名前を入力します。この例では、「Count」と入力しています。

  4. Progress Circleウィジェットを選択し、[Properties]タブで、Progressプロパティに進捗のパーセンテージに関連するロジックを入力します。

    この例では、進捗のパーセンテージを4%に設定する以下のロジックを入力します。

    Count / 25 * 100

  5. ツールボックスから、Buttonウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。この例では、[Increment]ボタンを呼び出し、On Clickプロパティを「New Client Action」に設定し、このアクションでCount変数に「Count + 1」を割り当てます。

  6. Progress Circleウィジェットを選択し、[Properties]タブで(オプションの)プロパティを設定して、色の設定などのProgress Circleのルックアンドフィールを変更することができます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。この例の結果は以下のようになります。

プロパティ

プロパティ 説明
Progress(Integer型): 必須 表示する進捗のパーセンテージ。関数またはローカル変数を使用できます。通常は0~100の数値です。
Text(Text型): オプション 円内に表示するテキスト。テキストを指定しない場合は、進捗のパーセンテージが表示されます。
ProgressColor(Text型): オプション 円形の進捗上のストロークの色。デフォルト値は"rgba (0,0,0,0.6)"です。
TrailColor(Text型): オプション 円形の進捗の空の部分の色。デフォルト値は"rgba (0,0,0,0.2)"です。
TextColor(Text型): オプション 円内のテキストの色。デフォルト値は"#333"です。
CircleThickness(Integer型): オプション 進捗状況をマークする円の太さ。

  • 空白 - 円の太さが8pxになります。これがデフォルト値です。
  • 4 - 円の太さが8pxになります。
AnimateInitialProgress (Boolean型): オプション Trueに設定すると、ゼロから進捗状況の値までの進捗がアニメーション化されます。これがデフォルトです。Falseに設定すると、進捗はアニメーション化されません。
ExtendedClass(Text型): オプション Progress Circle UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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