Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます

 

 
 
OutSystems

Animated Label

Animated Label UIパターンを使用すると、ユーザー入力がある場合にラベルをアニメーション化することができます。

Animated Label UIパターンの使用方法

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

Animated Labelウィジェットが表示されます。

![](<images/animatedlabel-7-ss.png>)

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

![](<images/animatedlabel-8-ss.png>)

デフォルトで、Animated Labelウィジェットには[Label]プレースホルダと[Input]プレースホルダが含まれています。

1.関連するテキストを[Label]プレースホルダに入力します。この例では、「Name」と入力しています。

![](<images/animatedlabel-9-ss.png>)

1.Inputウィジェットを選択し、[Properties]タブの[Variable]ドロップダウンで[New Local Variable]を選択して、Inputウィジェットの新しいローカル変数を作成します。

![](<images/animatedlabel-1-ss.png>)

1.この新しいローカル変数の名前を入力します。この例では、「UserInput」と入力しています。

![](<images/animatedlabel-2-ss.png>)

1.[Properties]タブで(オプションの)プロパティを設定し、Animated Labelのルックアンドフィールを変更することができます。

![](<images/animatedlabel-3-ss.png>)

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

プロパティ

プロパティ 説明
IsInline(Boolean型): オプション Falseの場合、アニメーション化された入力が白色の入力ボックス内に表示されます。Trueの場合、白色の入力ボックスは表示されません。これがデフォルトです。
ExtendedClass(Text型): オプション Animated Label UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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