Skip to main content

 

 

 

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

Progress Circle Fraction

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

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

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

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

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

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

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

  4. Progress Circleウィジェットを選択し、[Properties]タブでNumeratorプロパティとDenominatorプロパティの値を入力します。

    この例では、Numeratorの値としてCount変数を入力し、Denominatorの値として「25」を入力しています。

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

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

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

プロパティ

プロパティ 説明
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?