Skip to main content

 

パターン

 

 

OutSystems

Counter

複数の要素の現在のカウントに関するフィードバックを提供します。

Counterは、単一のトピックに関する複数の値の出現総数を表示するために使用します。

使用方法

プレースホルダにコンテンツを追加し、パターンの方向と高さを設定します。

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

  2. 入力パラメータをデフォルト値に設定します。

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

入力パラメータ

入力名 説明 必須 デフォルト値
Orientation 方向を設定します。 Orientation Identifier False Entities.Orientation.Horizontal
Height ブロックの高さ。ピクセル単位を使用します。 Text False 100
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.center-align .flex-direction-column OrientationがVerticalの場合

高度なユースケース

Counterパターンに新しいスタイルを追加する

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

  2. Orientationを「Vertical」に、Heightを「200」に、ExtendedClassプロパティを「background-blue shadow-xl」に設定します。

  3. コンテナを[Counter]プレースホルダにドラッグし、「26」と入力します。

  4. コンテナのStyle Classesプロパティを「font-size-display text-neutral-0」に設定します。

  5. コンテナを[Counter]プレースホルダにドラッグし、「Completed Requests」と入力します。

  6. 別のコンテナを[Counter]プレースホルダにドラッグします。

  7. Iconウィジェットをコンテナにドラッグし、Nameプロパティを「Entities.IconName.check」に設定し、Sizeを「Entities.IconSize.Size_3x」に設定します。

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

  • Was this article helpful?