Skip to main content

 

 

 

 
Language:

 

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

 

 
 
OutSystems

Input with Icon

Input with Icon UIパターンを使用すると、エンドユーザーがアイコン形式のヒントを利用しながらデータを入力することができます。

Input with Icon UIパターンには、ユーザーのデータ入力をサポートするアイコンとプレースホルダテキストが含まれます。必要な入力の種類を例示することによりユーザーの理解を支援します。

Input with Iconの使用方法

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

Input with Iconウィジェットが表示されます。

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

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

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

1.Inputウィジェットを選択し、[Properties]タブの[Variable]ドロップダウンで[New Local Variable]を選択します。

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

1.変数の名前を入力します。この例では、「Username」と入力し、Data Typeプロパティを[Text]に設定しています。

![](<images/inputwithicon-5-ss.png>)

1.Inputウィジェットをもう一度選択し、[Properties]タブで、入力ボックスに表示するテキスト(求められる値に関する説明)をPromptプロパティに入力します。この例では、「Username」と入力しています。

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

1.アイコンを変更するため、Iconウィジェットを選択し、[Name]ドロップダウンで入力ボックスに表示するアイコンを選択します。この例では、[user]アイコンを選択しています。

![](<images/inputwithicon-6-ss.png>)

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

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

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

プロパティ

プロパティ 説明
AlignIconRight(Boolean型): オプション Trueの場合、入力ボックスの右側にアイコンが表示されます。Falseの場合、入力ボックスの左側にアイコンが表示されます。これがデフォルトです。
ExtendedClass(Text型): オプション Input with Icon UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



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