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ウィジェットが表示されます。

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

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

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

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

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

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

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

プロパティ

プロパティ 説明
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?