Skip to main content

 

 

 

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

Animated Label

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

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

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

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

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

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

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

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

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

    この変数は、アプリ全体で再利用できます。

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

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

プロパティ

プロパティ 説明
ExtendedClass(Text型): オプション Animated Label UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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