Skip to main content

 

パターン

 

 

OutSystems

AnimatedLabel

ユーザー入力がある場合にアニメーションを実行する入力ラベル。

AnimatedLabelの入力は、エンドユーザーが入力に集中してコンテキストを維持するために使用します。

使用方法

パターンを画面にドラッグして、入力とラベルテキストを構成します。IsInlineパラメータを使用して、デフォルトの入力スタイルを使用するかどうかを定義することができます。

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

  2. InputウィジェットのVariableプロパティを、次のように設定します。

  3. [Label]プレースホルダのテキストを変更します。

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

入力パラメータ

入力名 説明 必須 デフォルト値
IsInline Falseに設定した場合、ブロックの入力スタイルをデフォルト(白の背景色)にします。 Boolean False True
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.animated-label .animated-label-inline IsInline入力パラメータがTrueの場合

高度なユースケース

アクティブになったときのラベルの位置を変更する

  1. CSSエディタで以下のCSSコードを記述します。

    css .animated-label.active .animated-label-text { top: 50px; } 1. パブリッシュしてテストします。

変更前

変更後

  • Was this article helpful?